Text Editor - Typography Plugin

Smart typographic replacements while typing, covering dashes, ellipsis, arrows, fractions, and symbols.

#Usage

import { TextEditor } from '@primeui/vue-texteditor';
import { typographyPlugin } from './typography-plugin';
<TextEditor.Root v-model="value" :plugins="[typographyPlugin]">
    <TextEditor.Toolbar />
    <TextEditor.Content />
</TextEditor.Root>

The Typography plugin rewrites common ASCII sequences into their proper typographic characters during input. It registers a set of input rules through the plugin's ProseMirror access, so each replacement fires on the triggering keystroke and round-trips as plain Unicode in the document value. It has no commands and no options.

#Overview

TypeBecomesTypeBecomes
--–<<«
-- then -—>>»
...…(c)©
->→(r)®
<-←(tm)™
+/-±!=≠
1/2½1/4¼
3/4¾

#Plugin Definition

import { defineTextEditorPlugin } from '@primeui/vue-texteditor';
import { InputRule, inputRules } from 'prosemirror-inputrules';

interface TextReplaceRule {
    find: RegExp;
    replace: string | ((match: RegExpMatchArray) => string);
}

const RULES: TextReplaceRule[] = [
    { find: /--$/, replace: '–' },
    { find: /\.\.\.$/, replace: '…' },
    { find: /->$/, replace: '→' },
    { find: /\(c\)$/i, replace: '©' },
    { find: /1\/2$/, replace: '½' }
    // ...additional rules
];

function makeRule({ find, replace }: TextReplaceRule): InputRule {
    return new InputRule(find, (state, match, start, end) => {
        const text = typeof replace === 'string' ? replace : replace(match);

        return state.tr.insertText(text, start, end);
    });
}

export const typographyPlugin = defineTextEditorPlugin('typography', (ctx) => {
    const remove = ctx.registerProseMirrorPlugin(inputRules({ rules: RULES.map(makeRule) }));

    ctx.onUnmounted(remove);

    return {};
});

#Example

Type any of the sequences above and they convert in place.

Loading Demo...