@fastkit/vui 0.7.59 → 0.7.61

package/dist/vui.mjs

@@ -8,12 +8,15 @@ import { getDocumentScroller as getDocumentScroller$1 } from '@fastkit/vue-scrol
 import { VProgressCircular } from '@fastkit/vue-loading';
 export * from '@fastkit/vue-loading';
 import { useScopeColorClass, colorSchemeProps, useColorClasses, toScopeColorClass } from '@fastkit/vue-color-scheme';
-import { loadImage, IN_WINDOW, isPromise } from '@fastkit/helpers';
+import { loadImage, IN_WINDOW, isPromise, debounce } from '@fastkit/helpers';
 export { ICON_NAMES } from '@fastkit/icon-font';
 import { VAppContainer, VAppLayoutControl } from '@fastkit/vue-app-layout';
 import { createTextableProps, createTextableEmits, TextableControl } from '@fastkit/vue-form-control';
 import { useEditor, EditorContent, BubbleMenu } from '@tiptap/vue-3';
 import StarterKit from '@tiptap/starter-kit';
+import { Extension } from '@tiptap/core';
+import { DecorationSet, Decoration } from 'prosemirror-view';
+import { Plugin, PluginKey, TextSelection } from 'prosemirror-state';
 import { BulletList } from '@tiptap/extension-bullet-list';
 import { Bold } from '@tiptap/extension-bold';
 import { Italic } from '@tiptap/extension-italic';
@@ -2869,13 +2872,63 @@ const VTextarea = defineComponent({
 
 });
 
+const EDITOR_EVENTS = [
+    'beforeCreate',
+    'create',
+    'update',
+    'selectionUpdate',
+    'transaction',
+    'focus',
+    'blur',
+    'destroy',
+];
+const prefixedEventName = (source) => {
+    return `on${source.charAt(0).toUpperCase()}${source.slice(1)}`;
+};
+class WysiwygEditorInitializeContext {
+    listeners = {};
+    constructor(opts = {}) {
+        EDITOR_EVENTS.forEach((event) => {
+            this.listeners[event] = [];
+            const prefixed = prefixedEventName(event);
+            const fn = opts[prefixed];
+            fn && this.listeners[event].push(fn);
+        });
+    }
+    on(ev, handler) {
+        this.listeners[ev].push(handler);
+        return () => this.off(ev, handler);
+    }
+    off(ev, handler) {
+        this.listeners[ev] = this.listeners[ev].filter((_handler) => _handler !== handler);
+    }
+    editorOptions() {
+        const opts = {};
+        EDITOR_EVENTS.forEach((event) => {
+            const prefixed = prefixedEventName(event);
+            opts[prefixed] = (props) => {
+                const handlers = this.listeners[event];
+                handlers.forEach((handler) => {
+                    handler(props);
+                });
+            };
+        });
+        return opts;
+    }
+}
+function resolveRawWysiwygExtension(raw, ctx) {
+    return typeof raw === 'function' ? raw(ctx) : raw;
+}
+function resolveRawWysiwygExtensions(raws, ctx) {
+    return raws.map((raw) => resolveRawWysiwygExtension(raw, ctx));
+}
 function resolveRawWysiwygEditorTool(raw, vui) {
     return typeof raw === 'function' ? raw(vui) : raw;
 }
-function resolveRawWysiwygEditorTools(raws, vui) {
+function resolveRawWysiwygEditorTools(rawTools, vui) {
     const tools = [];
     const extensions = [];
-    raws.forEach((raw) => {
+    rawTools.forEach((raw) => {
         let resolved = resolveRawWysiwygEditorTool(raw, vui);
         if (!Array.isArray(resolved)) {
             resolved = [resolved];
@@ -2906,6 +2959,10 @@ const VWysiwygEditor = defineComponent({
     ...createControlFieldProviderProps(),
     ...createControlProps(),
     ...defineSlotsProps(),
+    extensions: {
+      type: Array,
+      default: () => []
+    },
     tools: {
       type: Array,
       default: () => []
@@ -2928,13 +2985,40 @@ const VWysiwygEditor = defineComponent({
       nodeType: VUI_WYSIWYG_EDITOR_SYMBOL,
       validationValue: () => textRef.value
     });
+    const initializeCtx = new WysiwygEditorInitializeContext({
+      onCreate: ({
+        editor
+      }) => {
+        textRef.value = editor.getText();
+        updateEditable();
+      },
+      onFocus: ({
+        event
+      }) => {
+        inputControl.focusHandler(event);
+      },
+      onBlur: ({
+        event
+      }) => {
+        inputControl.blurHandler(event);
+      },
+      onUpdate: ({
+        editor
+      }) => {
+        inputControl.value = editor.getHTML();
+        textRef.value = editor.getText();
+      }
+    });
     const extensions = [StarterKit.configure({
       bold: false,
       bulletList: false,
       orderedList: false,
       history: false,
       italic: false
-    }), ...wysiwygSettings.value.extensions];
+    }), // Linter.configure({
+    //   plugins: [BadWords(['abc', 'evidently']), Punctuation, HeadingLevel],
+    // }),
+    ...resolveRawWysiwygExtensions(props.extensions, initializeCtx), ...wysiwygSettings.value.extensions];
 
     const updateEditable = () => {
       if (!editor.value) return;
@@ -2948,23 +3032,13 @@ const VWysiwygEditor = defineComponent({
       $editor.commands.setContent(modelValue == null ? '' : modelValue, false);
       textRef.value = $editor.getText();
     });
-    const editor = useEditor({
-      onCreate: ({
-        editor
-      }) => {
-        textRef.value = editor.getText();
-        updateEditable();
-      },
-      onFocus: ctx => {
-        inputControl.focusHandler(ctx.event);
-      },
-      onBlur: ctx => {
-        inputControl.blurHandler(ctx.event);
-      },
-      onUpdate: ev => {
-        inputControl.value = ev.editor.getHTML();
-        textRef.value = ev.editor.getText();
-      },
+    initializeCtx.on('create', ({
+      editor
+    }) => {
+      textRef.value = editor.getText();
+      updateEditable();
+    });
+    const editor = useEditor({ ...initializeCtx.editorOptions(),
       autofocus: props.autofocus,
       content: props.modelValue,
       extensions,
@@ -3047,6 +3121,9 @@ const VWysiwygEditor = defineComponent({
       });
     };
 
+    onBeforeUnmount(() => {
+      editor.value && editor.value.destroy();
+    });
     return {
       editor,
       ...inputControl.expose(),
@@ -3122,6 +3199,284 @@ function resolveContextableValue(ctx, source) {
   return typeof source === 'function' ? source(ctx) : source;
 }
 
+const PROBLEM_CLASS_NAME = 'v-linter__problem';
+const ISSUE_ICON_CLASS_NAME = 'v-linter__issue-icon';
+const ISSUE_MENU_CLASS_NAME = 'v-linter__issue-menu';
+function renderIcon(view, issue) {
+    const { level = 'warning' } = issue;
+    const icon = document.createElement('div');
+    icon.className = `${ISSUE_ICON_CLASS_NAME} ${level}-scope`;
+    icon.title = issue.message;
+    icon.issue = issue;
+    return icon;
+}
+function renderMenu(view, issue) {
+    const menuWrapper = document.createElement('div');
+    menuWrapper.className = 'v-linter__issue-menu-wrapper';
+    const menu = document.createElement('div');
+    menu.className = `${ISSUE_MENU_CLASS_NAME} elevation-3`;
+    menu.innerText = issue.message;
+    const { fix, fixMessage } = issue;
+    if (fix && fixMessage) {
+        const $fix = document.createElement('button');
+        $fix.type = 'button';
+        $fix.innerHTML = fixMessage;
+        $fix.addEventListener('click', () => {
+            fix(view, issue);
+        });
+        $fix.className = `v-linter__issue-menu__fix`;
+        menu.appendChild($fix);
+    }
+    menu.issue = issue;
+    menuWrapper.appendChild(menu);
+    return menuWrapper;
+}
+function getIssueElement(source, className) {
+    if (!source || !(source instanceof HTMLElement)) {
+        return;
+    }
+    if (source.classList.contains(className)) {
+        return source;
+    }
+    const el = source.closest(`.${className}`);
+    if (el) {
+        return el;
+    }
+}
+function getIconElement(source) {
+    return getIssueElement(source, ISSUE_ICON_CLASS_NAME);
+}
+function getMenuElement(source) {
+    return getIssueElement(source, ISSUE_MENU_CLASS_NAME);
+}
+function getProblemElement(source) {
+    return getIssueElement(source, PROBLEM_CLASS_NAME);
+}
+function runAllLinterPlugins(doc, plugins) {
+    const decorations = [];
+    const results = plugins
+        .map((RegisteredLinterPlugin) => {
+        return new RegisteredLinterPlugin(doc).scan().getResults();
+    })
+        .flat();
+    results.forEach((issue) => {
+        const { level = 'warning' } = issue;
+        decorations.push(Decoration.inline(issue.from, issue.to, {
+            class: `${PROBLEM_CLASS_NAME} ${level}-scope`,
+            'data-issue': JSON.stringify(issue),
+            title: issue.message,
+        }), Decoration.widget(issue.from, (view) => renderIcon(view, issue)), Decoration.widget(issue.from, (view) => renderMenu(view, issue)));
+    });
+    return DecorationSet.create(doc, decorations);
+}
+function updateMenusPosition(editorElement) {
+    const { left, right } = editorElement.getBoundingClientRect();
+    const menus = Array.from(editorElement.querySelectorAll(`.${ISSUE_MENU_CLASS_NAME}`));
+    menus.forEach((menu) => {
+        const { left: menuLeft, right: menuRight } = menu.getBoundingClientRect();
+        const overflow = menuRight - right;
+        let offset = 0;
+        if (overflow > 0) {
+            offset = -overflow;
+            if (menuLeft + offset < left) {
+                offset = 0;
+            }
+        }
+        menu.style.transform = `translateX(${offset}px)`;
+    });
+}
+const debouncedUpdateMenusPosition = debounce(updateMenusPosition, 250);
+const Linter = Extension.create({
+    name: 'linter',
+    addOptions() {
+        return {
+            plugins: [],
+        };
+    },
+    onCreate() {
+        const { dom } = this.editor.view;
+        debouncedUpdateMenusPosition(dom);
+    },
+    onUpdate() {
+        const { dom } = this.editor.view;
+        debouncedUpdateMenusPosition(dom);
+    },
+    addProseMirrorPlugins() {
+        const { plugins } = this.options;
+        return [
+            new Plugin({
+                key: new PluginKey('linter'),
+                state: {
+                    init(_, { doc }) {
+                        return runAllLinterPlugins(doc, plugins);
+                    },
+                    apply(transaction, oldState) {
+                        return transaction.docChanged
+                            ? runAllLinterPlugins(transaction.doc, plugins)
+                            : oldState;
+                    },
+                },
+                props: {
+                    decorations(state) {
+                        return this.getState(state);
+                    },
+                    handleClick(view, _, event) {
+                        const activeMenus = Array.from(view.dom.querySelectorAll(`.${ISSUE_MENU_CLASS_NAME}--active`));
+                        activeMenus.forEach((menu) => menu.classList.remove(`${ISSUE_MENU_CLASS_NAME}--active`));
+                        const problem = getProblemElement(event.target);
+                        const issueString = problem && problem.dataset['issue'];
+                        const issue = issueString && JSON.parse(issueString);
+                        if (issue) {
+                            const menuWrapper = problem.previousElementSibling;
+                            const menu = menuWrapper &&
+                                menuWrapper.querySelector(`.${ISSUE_MENU_CLASS_NAME}`);
+                            menu && menu.classList.add(`${ISSUE_MENU_CLASS_NAME}--active`);
+                            const { from, to } = issue;
+                            view.dispatch(view.state.tr
+                                .setSelection(TextSelection.create(view.state.doc, from, to))
+                                .scrollIntoView());
+                            return true;
+                        }
+                        const menu = getMenuElement(event.target);
+                        if (menu) {
+                            menu.classList.add(`${ISSUE_MENU_CLASS_NAME}--active`);
+                        }
+                        const target = getIconElement(event.target);
+                        if (target && target.issue) {
+                            const menuWrapper = target.nextElementSibling;
+                            const menu = menuWrapper &&
+                                menuWrapper.querySelector(`.${ISSUE_MENU_CLASS_NAME}`);
+                            menu && menu.classList.add(`${ISSUE_MENU_CLASS_NAME}--active`);
+                            const { from, to } = target.issue;
+                            view.dispatch(view.state.tr
+                                .setSelection(TextSelection.create(view.state.doc, from, to))
+                                .scrollIntoView());
+                            return true;
+                        }
+                        return false;
+                    },
+                    handleDoubleClick(view, _, event) {
+                        const target = getIconElement(event.target);
+                        if (target && target.issue) {
+                            const prob = target.issue;
+                            if (prob.fix) {
+                                prob.fix(view, prob);
+                                view.focus();
+                                return true;
+                            }
+                        }
+                        return false;
+                    },
+                },
+            }),
+        ];
+    },
+});
+
+class LinterPlugin {
+    doc;
+    results = [];
+    constructor(doc) {
+        this.doc = doc;
+    }
+    record(result) {
+        this.results.push({
+            level: 'error',
+            ...result,
+        });
+    }
+    scan() {
+        return this;
+    }
+    getResults() {
+        return this.results;
+    }
+}
+
+function BadWords(words) {
+    const regex = new RegExp(`\\b(${words.join('|')})\\b`);
+    return class BadWords extends LinterPlugin {
+        scan() {
+            this.doc.descendants((node, position) => {
+                if (!node.isText) {
+                    return;
+                }
+                const matches = regex.exec(node.text);
+                if (matches) {
+                    const fixValue = matches[0] + '!!!!!';
+                    this.record({
+                        level: 'warning',
+                        message: `Try not to say '${matches[0]}'`,
+                        from: position + matches.index,
+                        to: position + matches.index + matches[0].length,
+                        fix: () => {
+                            console.log('hoge');
+                        },
+                        fixMessage: `「${fixValue}」に修正する。`,
+                    });
+                }
+            });
+            return this;
+        }
+    };
+}
+
+class HeadingLevel extends LinterPlugin {
+    fixHeader(level) {
+        return function ({ state, dispatch }, issue) {
+            dispatch(state.tr.setNodeMarkup(issue.from - 1, undefined, { level }));
+        };
+    }
+    scan() {
+        let lastHeadLevel = null;
+        this.doc.descendants((node, position) => {
+            if (node.type.name === 'heading') {
+                // Check whether heading levels fit under the current level
+                const { level } = node.attrs;
+                if (lastHeadLevel != null && level > lastHeadLevel + 1) {
+                    this.record({
+                        message: `Heading too small (${level} under ${lastHeadLevel})`,
+                        from: position + 1,
+                        to: position + 1 + node.content.size,
+                        fix: this.fixHeader(lastHeadLevel + 1),
+                    });
+                }
+                lastHeadLevel = level;
+            }
+        });
+        return this;
+    }
+}
+
+class Punctuation extends LinterPlugin {
+    regex = / ([,.!?:]) ?/g;
+    fix(replacement) {
+        return function ({ state, dispatch }, issue) {
+            dispatch(state.tr.replaceWith(issue.from, issue.to, state.schema.text(replacement)));
+        };
+    }
+    scan() {
+        this.doc.descendants((node, position) => {
+            if (!node.isText) {
+                return;
+            }
+            if (!node.text) {
+                return;
+            }
+            const matches = this.regex.exec(node.text);
+            if (matches) {
+                this.record({
+                    message: 'Suspicious spacing around punctuation',
+                    from: position + matches.index,
+                    to: position + matches.index + matches[0].length,
+                    fix: this.fix(`${matches[1]} `),
+                });
+            }
+        });
+        return this;
+    }
+}
+
 const WysiwygBulletListTool = (vui, options) => {
     const tool = {
         key: 'bulletList',
@@ -5041,4 +5396,4 @@ function installVuiPlugin(app, opts) {
   return app.use(VuiPlugin, opts);
 }
 
-export { AVATAR_SIZES, CHIP_SIZES, CONTROL_FIELD_VARIANTS, CONTROL_LOADING_SPINNER_SIZES, CONTROL_SIZES, PAGINATION_ALIGNS, VApp, VAvatar, VBreadcrumbs, VBusyImage, VButton, VButtonGroup, VCard, VCardActions, VCardContent, VCheckbox, VCheckboxGroup, VChip, VContentSwitcher, VDataTable, VDrawerLayout, VForm, VFormControl, VGridContainer, VGridItem, VHero, VIcon, VListTile, VNavigation, VNavigationItem, VNumberField, VOption, VOptionGroup, VPagination, VPaper, VRadio, VRadioGroup, VSelect, VSkeltonLoaderBone, VSwitch, VSwitchGroup, VTabs, VTextField, VTextarea, VToolbar, VToolbarEdge, VToolbarMenu, VToolbarTitle, VUI_CHECKBOX_GROUP_SYMBOL, VUI_CHECKBOX_SYMBOL, VUI_FORM_SYMBOL, VUI_OPTION_SYMBOL, VUI_RADIO_GROUP_SYMBOL, VUI_RADIO_SYMBOL, VUI_SELECT_SYMBOL, VUI_SWITCH_GROUP_SYMBOL, VUI_SWITCH_SYMBOL, VUI_TEXTAREA_SYMBOL, VUI_TEXT_FIELD_SYMBOL, VUI_WYSIWYG_EDITOR_SYMBOL, VWysiwygEditor, VuiColorProviderInjectionKey, VuiControlFieldInjectionKey, VuiControlInjectionKey, VuiInjectionKey, VuiPlugin, VuiService, WysiwygBulletListTool, WysiwygFormatBoldTool, WysiwygFormatItalicTool, WysiwygFormatUnderlineTool, WysiwygHistoryTool, WysiwygLinkTool, WysiwygOrderedListTool, WysiwygTextColorTool, configureDataTableDefaults, createAvatarProps, createCardProps, createChipProps, createControlFieldProviderProps, createControlProps, createElevationProps, createListTileProps, createNavigationItemProps, createPaperBaseProps, createPaperProps, createRequiredChipRenderer, createVFormProps, defineFormSelectorComponent, iconProps, installVuiPlugin, listTileEmits, mergeVuiPluginOptions, mergeVuiServiceIconSettings, mergeVuiServiceOptions, mergeVuiServiceUISettings, paginationProps, rawIconProp, renderNavigationItemInput, resolveNavigationItemInput, resolveRawIconProp, resolveRawWysiwygEditorTools, splitAttrs, useControl, useControlField, useElevation, useVui, useVuiColorProvider, vueButtonProps };
+export { AVATAR_SIZES, BadWords, CHIP_SIZES, CONTROL_FIELD_VARIANTS, CONTROL_LOADING_SPINNER_SIZES, CONTROL_SIZES, HeadingLevel, Linter, LinterPlugin, PAGINATION_ALIGNS, Punctuation, VApp, VAvatar, VBreadcrumbs, VBusyImage, VButton, VButtonGroup, VCard, VCardActions, VCardContent, VCheckbox, VCheckboxGroup, VChip, VContentSwitcher, VDataTable, VDrawerLayout, VForm, VFormControl, VGridContainer, VGridItem, VHero, VIcon, VListTile, VNavigation, VNavigationItem, VNumberField, VOption, VOptionGroup, VPagination, VPaper, VRadio, VRadioGroup, VSelect, VSkeltonLoaderBone, VSwitch, VSwitchGroup, VTabs, VTextField, VTextarea, VToolbar, VToolbarEdge, VToolbarMenu, VToolbarTitle, VUI_CHECKBOX_GROUP_SYMBOL, VUI_CHECKBOX_SYMBOL, VUI_FORM_SYMBOL, VUI_OPTION_SYMBOL, VUI_RADIO_GROUP_SYMBOL, VUI_RADIO_SYMBOL, VUI_SELECT_SYMBOL, VUI_SWITCH_GROUP_SYMBOL, VUI_SWITCH_SYMBOL, VUI_TEXTAREA_SYMBOL, VUI_TEXT_FIELD_SYMBOL, VUI_WYSIWYG_EDITOR_SYMBOL, VWysiwygEditor, VuiColorProviderInjectionKey, VuiControlFieldInjectionKey, VuiControlInjectionKey, VuiInjectionKey, VuiPlugin, VuiService, WysiwygBulletListTool, WysiwygEditorInitializeContext, WysiwygFormatBoldTool, WysiwygFormatItalicTool, WysiwygFormatUnderlineTool, WysiwygHistoryTool, WysiwygLinkTool, WysiwygOrderedListTool, WysiwygTextColorTool, configureDataTableDefaults, createAvatarProps, createCardProps, createChipProps, createControlFieldProviderProps, createControlProps, createElevationProps, createListTileProps, createNavigationItemProps, createPaperBaseProps, createPaperProps, createRequiredChipRenderer, createVFormProps, defineFormSelectorComponent, iconProps, installVuiPlugin, listTileEmits, mergeVuiPluginOptions, mergeVuiServiceIconSettings, mergeVuiServiceOptions, mergeVuiServiceUISettings, paginationProps, rawIconProp, renderNavigationItemInput, resolveNavigationItemInput, resolveRawIconProp, resolveRawWysiwygEditorTools, resolveRawWysiwygExtensions, splitAttrs, useControl, useControlField, useElevation, useVui, useVuiColorProvider, vueButtonProps };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fastkit/vui",
-  "version": "0.7.59",
+  "version": "0.7.61",
   "description": "@fastkit/vui",
   "buildOptions": {
     "name": "Vui",
@@ -32,11 +32,11 @@
     "vue": "^3.2.26"
   },
   "dependencies": {
-    "@fastkit/color-scheme": "0.7.59",
-    "@fastkit/icon-font": "0.7.59",
-    "@fastkit/tiny-logger": "0.7.59",
-    "@fastkit/vite-kit": "0.7.59",
-    "@fastkit/vue-kit": "0.7.59",
+    "@fastkit/color-scheme": "0.7.61",
+    "@fastkit/icon-font": "0.7.61",
+    "@fastkit/tiny-logger": "0.7.61",
+    "@fastkit/vite-kit": "0.7.61",
+    "@fastkit/vue-kit": "0.7.61",
     "@tiptap/extension-link": "^2.0.0-beta.36",
     "@tiptap/extension-underline": "^2.0.0-beta.23",
     "@tiptap/starter-kit": "^2.0.0-beta.183",

package/src/components/VWysiwygEditor/VWysiwygEditor.tsx

@@ -1,5 +1,12 @@
 import './VWysiwygEditor.scss';
-import { defineComponent, PropType, computed, ref, watch } from 'vue';
+import {
+  defineComponent,
+  PropType,
+  computed,
+  ref,
+  watch,
+  onBeforeUnmount,
+} from 'vue';
 import {
   createFormControlProps,
   FormControlSlots,
@@ -34,10 +41,15 @@ import {
 import StarterKit from '@tiptap/starter-kit';
 import { VButton, VButtonGroup } from '../VButton';
 import {
+  RawWysiwygExtension,
+  resolveRawWysiwygExtensions,
   RawWysiwygEditorTool,
   resolveRawWysiwygEditorTools,
   WysiwygEditorContext,
+  // EditorEventsOptions,
+  WysiwygEditorInitializeContext,
 } from './schemes';
+// import { Linter, BadWords, Punctuation, HeadingLevel } from './extensions';
 
 export const VWysiwygEditor = defineComponent({
   name: 'VWysiwygEditor',
@@ -49,6 +61,10 @@ export const VWysiwygEditor = defineComponent({
     ...createControlFieldProviderProps(),
     ...createControlProps(),
     ...defineSlotsProps<FormControlSlots & InputBoxSlots>(),
+    extensions: {
+      type: Array as PropType<RawWysiwygExtension[]>,
+      default: () => [],
+    },
     tools: {
       type: Array as PropType<RawWysiwygEditorTool[]>,
       default: () => [],
@@ -78,6 +94,23 @@ export const VWysiwygEditor = defineComponent({
       validationValue: () => textRef.value,
     });
 
+    const initializeCtx = new WysiwygEditorInitializeContext({
+      onCreate: ({ editor }) => {
+        textRef.value = editor.getText();
+        updateEditable();
+      },
+      onFocus: ({ event }) => {
+        inputControl.focusHandler(event);
+      },
+      onBlur: ({ event }) => {
+        inputControl.blurHandler(event);
+      },
+      onUpdate: ({ editor }) => {
+        inputControl.value = editor.getHTML();
+        textRef.value = editor.getText();
+      },
+    });
+
     const extensions = [
       StarterKit.configure({
         bold: false,
@@ -86,6 +119,10 @@ export const VWysiwygEditor = defineComponent({
         history: false,
         italic: false,
       }),
+      // Linter.configure({
+      //   plugins: [BadWords(['abc', 'evidently']), Punctuation, HeadingLevel],
+      // }),
+      ...resolveRawWysiwygExtensions(props.extensions, initializeCtx),
       ...wysiwygSettings.value.extensions,
     ];
 
@@ -110,21 +147,13 @@ export const VWysiwygEditor = defineComponent({
       },
     );
 
+    initializeCtx.on('create', ({ editor }) => {
+      textRef.value = editor.getText();
+      updateEditable();
+    });
+
     const editor = useEditor({
-      onCreate: ({ editor }) => {
-        textRef.value = editor.getText();
-        updateEditable();
-      },
-      onFocus: (ctx) => {
-        inputControl.focusHandler(ctx.event);
-      },
-      onBlur: (ctx) => {
-        inputControl.blurHandler(ctx.event);
-      },
-      onUpdate: (ev) => {
-        inputControl.value = ev.editor.getHTML();
-        textRef.value = ev.editor.getText();
-      },
+      ...initializeCtx.editorOptions(),
       autofocus: props.autofocus,
       content: props.modelValue,
       extensions,
@@ -214,6 +243,10 @@ export const VWysiwygEditor = defineComponent({
       );
     };
 
+    onBeforeUnmount(() => {
+      editor.value && editor.value.destroy();
+    });
+
     return {
       editor,
       ...inputControl.expose(),

package/src/components/VWysiwygEditor/extensions/index.ts

@@ -0,0 +1 @@
+export * from './linter';

package/src/components/VWysiwygEditor/extensions/linter/Linter.scss

@@ -0,0 +1,75 @@
+.v-linter {
+  &__problem {
+    margin-bottom: -1px;
+    cursor: help;
+    background: var(--deep-color);
+    border-bottom: 1px solid var(--main-color);
+  }
+
+  &__issue-icon {
+    position: absolute;
+    right: 2px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.2em;
+    height: 1.2em;
+    margin-top: 0.2em;
+    // padding-left: 0.5px;
+    font-family: times, georgia, serif;
+    font-size: 15px;
+    font-weight: 700;
+    line-height: 1;
+    color: var(--text-color);
+    text-align: center;
+    cursor: pointer;
+    background: var(--main-color);
+    border-radius: 100px;
+
+    &::before {
+      content: '!';
+    }
+  }
+
+  &__issue-menu-wrapper {
+    position: relative;
+    display: inline-block;
+    width: 0px;
+    height: 1em;
+    overflow: visible;
+  }
+
+  &__issue-menu {
+    position: absolute;
+    top: calc(100% + 8px);
+    left: 0;
+    min-width: 200px;
+    max-width: calc(100vw - 40px);
+    padding: 8px;
+    // font-size: 12px;
+    font-size: 87.5%;
+    line-height: 1.5;
+    pointer-events: none;
+    background: #fff;
+    border-radius: 4px;
+    opacity: 0;
+    transition: opacity 0.15s;
+
+    &--active {
+      pointer-events: auto;
+      opacity: 1;
+    }
+
+    &__fix {
+      display: inline;
+      margin-top: 8px;
+      color: var(--palette-link);
+      text-decoration: underline;
+      cursor: pointer;
+      background: transparent;
+      border: 0;
+      outline: 0;
+      appearance: none;
+    }
+  }
+}