@fastkit/vui 0.7.56 → 0.7.61

package/dist/vui.cjs.js

@@ -15,6 +15,9 @@ var vueAppLayout = require('@fastkit/vue-app-layout');
 var vueFormControl = require('@fastkit/vue-form-control');
 var vue3 = require('@tiptap/vue-3');
 var StarterKit = require('@tiptap/starter-kit');
+var core = require('@tiptap/core');
+var prosemirrorView = require('prosemirror-view');
+var prosemirrorState = require('prosemirror-state');
 var extensionBulletList = require('@tiptap/extension-bullet-list');
 var extensionBold = require('@tiptap/extension-bold');
 var extensionItalic = require('@tiptap/extension-italic');
@@ -2874,13 +2877,63 @@ const VTextarea = vue.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];
@@ -2911,6 +2964,10 @@ const VWysiwygEditor = vue.defineComponent({
     ...createControlFieldProviderProps(),
     ...createControlProps(),
     ...vueKit.defineSlotsProps(),
+    extensions: {
+      type: Array,
+      default: () => []
+    },
     tools: {
       type: Array,
       default: () => []
@@ -2933,13 +2990,40 @@ const VWysiwygEditor = vue.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__default.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;
@@ -2953,23 +3037,13 @@ const VWysiwygEditor = vue.defineComponent({
       $editor.commands.setContent(modelValue == null ? '' : modelValue, false);
       textRef.value = $editor.getText();
     });
-    const editor = vue3.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 = vue3.useEditor({ ...initializeCtx.editorOptions(),
       autofocus: props.autofocus,
       content: props.modelValue,
       extensions,
@@ -3052,6 +3126,9 @@ const VWysiwygEditor = vue.defineComponent({
       });
     };
 
+    vue.onBeforeUnmount(() => {
+      editor.value && editor.value.destroy();
+    });
     return {
       editor,
       ...inputControl.expose(),
@@ -3087,9 +3164,7 @@ const VWysiwygEditor = vue.defineComponent({
         } = this;
         return vue.createVNode("div", {
           "class": "v-wysiwyg-editor__wrapper"
-        }, [!this.isReadonly && this.createTools(), vue.createVNode("div", {
-          "class": "v-wysiwyg-editor__body"
-        }, [vue.createVNode(VControlField, {
+        }, [!this.isReadonly && this.createTools(), vue.createVNode(VControlField, {
           "class": "v-wysiwyg-editor__input",
           "autoHeight": true,
           "startAdornment": this.startAdornment,
@@ -3099,7 +3174,9 @@ const VWysiwygEditor = vue.defineComponent({
           default: () => {
             let _slot2;
 
-            return vue.createVNode(vue.Fragment, null, [vue.createVNode(vue3.EditorContent, {
+            return vue.createVNode("div", {
+              "class": "v-wysiwyg-editor__body"
+            }, [vue.createVNode(vue3.EditorContent, {
               "class": "v-wysiwyg-editor__input__element wysiwyg",
               "editor": editor
             }, null), !this.floatingToolbar && !!editor && !this.isReadonly && vue.createVNode(vue3.BubbleMenu, {
@@ -3109,7 +3186,7 @@ const VWysiwygEditor = vue.defineComponent({
               default: () => [_slot2]
             })]);
           }
-        })])]);
+        })]);
       },
       infoAppends: () => {
         const {
@@ -3127,6 +3204,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(prosemirrorView.Decoration.inline(issue.from, issue.to, {
+            class: `${PROBLEM_CLASS_NAME} ${level}-scope`,
+            'data-issue': JSON.stringify(issue),
+            title: issue.message,
+        }), prosemirrorView.Decoration.widget(issue.from, (view) => renderIcon(view, issue)), prosemirrorView.Decoration.widget(issue.from, (view) => renderMenu(view, issue)));
+    });
+    return prosemirrorView.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 = helpers.debounce(updateMenusPosition, 250);
+const Linter = core.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 prosemirrorState.Plugin({
+                key: new prosemirrorState.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(prosemirrorState.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(prosemirrorState.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',
@@ -5052,11 +5407,16 @@ exports.VSnackbar = vueKit.VSnackbar;
 exports.VTooltip = vueKit.VTooltip;
 exports.ICON_NAMES = iconFont.ICON_NAMES;
 exports.AVATAR_SIZES = AVATAR_SIZES;
+exports.BadWords = BadWords;
 exports.CHIP_SIZES = CHIP_SIZES;
 exports.CONTROL_FIELD_VARIANTS = CONTROL_FIELD_VARIANTS;
 exports.CONTROL_LOADING_SPINNER_SIZES = CONTROL_LOADING_SPINNER_SIZES;
 exports.CONTROL_SIZES = CONTROL_SIZES;
+exports.HeadingLevel = HeadingLevel;
+exports.Linter = Linter;
+exports.LinterPlugin = LinterPlugin;
 exports.PAGINATION_ALIGNS = PAGINATION_ALIGNS;
+exports.Punctuation = Punctuation;
 exports.VApp = VApp;
 exports.VAvatar = VAvatar;
 exports.VBreadcrumbs = VBreadcrumbs;
@@ -5119,6 +5479,7 @@ exports.VuiInjectionKey = VuiInjectionKey;
 exports.VuiPlugin = VuiPlugin;
 exports.VuiService = VuiService;
 exports.WysiwygBulletListTool = WysiwygBulletListTool;
+exports.WysiwygEditorInitializeContext = WysiwygEditorInitializeContext;
 exports.WysiwygFormatBoldTool = WysiwygFormatBoldTool;
 exports.WysiwygFormatItalicTool = WysiwygFormatItalicTool;
 exports.WysiwygFormatUnderlineTool = WysiwygFormatUnderlineTool;
@@ -5153,6 +5514,7 @@ exports.renderNavigationItemInput = renderNavigationItemInput;
 exports.resolveNavigationItemInput = resolveNavigationItemInput;
 exports.resolveRawIconProp = resolveRawIconProp;
 exports.resolveRawWysiwygEditorTools = resolveRawWysiwygEditorTools;
+exports.resolveRawWysiwygExtensions = resolveRawWysiwygExtensions;
 exports.splitAttrs = splitAttrs;
 exports.useControl = useControl;
 exports.useControlField = useControlField;