@fastkit/vui 0.7.56 → 0.7.61

package/src/components/VWysiwygEditor/VWysiwygEditor.tsx

@@ -1,5 +1,12 @@
 import './VWysiwygEditor.scss';
-import { defineComponent, Fragment, 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(),
@@ -253,40 +286,38 @@ export const VWysiwygEditor = defineComponent({
             return (
               <div class="v-wysiwyg-editor__wrapper">
                 {!this.isReadonly && this.createTools()}
-                <div class="v-wysiwyg-editor__body">
-                  <VControlField
-                    class="v-wysiwyg-editor__input"
-                    autoHeight
-                    startAdornment={this.startAdornment}
-                    endAdornment={this.endAdornment}
-                    size={this.size}
-                    // onClickHost={(ev) => {
-                    //   this.focus();
-                    // }}
-                    v-slots={{
-                      ...this.$slots,
-                      default: () => {
-                        return (
-                          <Fragment>
-                            <EditorContent
-                              class="v-wysiwyg-editor__input__element wysiwyg"
-                              editor={editor}
-                            />
-                            {!this.floatingToolbar &&
-                              !!editor &&
-                              !this.isReadonly && (
-                                <BubbleMenu
-                                  class="v-wysiwyg-editor__bubble-menu"
-                                  editor={editor}>
-                                  {this.createTools(true)}
-                                </BubbleMenu>
-                              )}
-                          </Fragment>
-                        );
-                      },
-                    }}
-                  />
-                </div>
+                <VControlField
+                  class="v-wysiwyg-editor__input"
+                  autoHeight
+                  startAdornment={this.startAdornment}
+                  endAdornment={this.endAdornment}
+                  size={this.size}
+                  // onClickHost={(ev) => {
+                  //   this.focus();
+                  // }}
+                  v-slots={{
+                    ...this.$slots,
+                    default: () => {
+                      return (
+                        <div class="v-wysiwyg-editor__body">
+                          <EditorContent
+                            class="v-wysiwyg-editor__input__element wysiwyg"
+                            editor={editor}
+                          />
+                          {!this.floatingToolbar &&
+                            !!editor &&
+                            !this.isReadonly && (
+                              <BubbleMenu
+                                class="v-wysiwyg-editor__bubble-menu"
+                                editor={editor}>
+                                {this.createTools(true)}
+                              </BubbleMenu>
+                            )}
+                        </div>
+                      );
+                    },
+                  }}
+                />
               </div>
             );
           },

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;
+    }
+  }
+}

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

@@ -0,0 +1,262 @@
+import './Linter.scss';
+
+import { Extension } from '@tiptap/core';
+import { Decoration, DecorationSet } from 'prosemirror-view';
+import { Plugin, PluginKey, TextSelection } from 'prosemirror-state';
+import { Node as ProsemirrorNode } from 'prosemirror-model';
+import { LinterPlugin, LinterResult as Issue } from './LinterPlugin';
+import { debounce } from '@fastkit/helpers';
+import { EditorView } from 'prosemirror-view';
+
+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';
+
+interface IssueElement extends HTMLDivElement {
+  issue?: Issue;
+}
+
+function renderIcon(view: EditorView<any>, issue: Issue) {
+  const { level = 'warning' } = issue;
+  const icon: IssueElement = document.createElement('div');
+
+  icon.className = `${ISSUE_ICON_CLASS_NAME} ${level}-scope`;
+  icon.title = issue.message;
+  icon.issue = issue;
+
+  return icon;
+}
+
+function renderMenu(view: EditorView<any>, issue: Issue) {
+  const menuWrapper = document.createElement('div');
+  menuWrapper.className = 'v-linter__issue-menu-wrapper';
+  const menu: IssueElement = 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: HTMLElement | EventTarget | null,
+  className: string,
+): IssueElement | undefined {
+  if (!source || !(source instanceof HTMLElement)) {
+    return;
+  }
+  if (source.classList.contains(className)) {
+    return source as IssueElement;
+  }
+  const el = source.closest(`.${className}`);
+  if (el) {
+    return el as IssueElement;
+  }
+}
+
+function getIconElement(
+  source: HTMLElement | EventTarget | null,
+): IssueElement | undefined {
+  return getIssueElement(source, ISSUE_ICON_CLASS_NAME);
+}
+
+function getMenuElement(
+  source: HTMLElement | EventTarget | null,
+): IssueElement | undefined {
+  return getIssueElement(source, ISSUE_MENU_CLASS_NAME);
+}
+
+function getProblemElement(
+  source: HTMLElement | EventTarget | null,
+): IssueElement | undefined {
+  return getIssueElement(source, PROBLEM_CLASS_NAME);
+}
+
+function runAllLinterPlugins(
+  doc: ProsemirrorNode,
+  plugins: Array<typeof LinterPlugin>,
+) {
+  const decorations: [any?] = [];
+
+  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);
+}
+
+export interface LinterOptions {
+  plugins: Array<typeof LinterPlugin>;
+}
+
+function updateMenusPosition(editorElement: Element) {
+  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 as HTMLElement).style.transform = `translateX(${offset}px)`;
+  });
+}
+
+const debouncedUpdateMenusPosition = debounce(updateMenusPosition, 250);
+
+export const Linter = Extension.create<LinterOptions>({
+  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;
+          },
+        },
+      }),
+    ];
+  },
+});

package/src/components/VWysiwygEditor/extensions/linter/LinterPlugin.ts

@@ -0,0 +1,44 @@
+import { Node as ProsemirrorNode } from 'prosemirror-model';
+import { EditorView } from 'prosemirror-view';
+
+export type FixFn = (view: EditorView, issue: LinterResult) => any;
+
+export type LinterResultLevel = 'warning' | 'error';
+
+export interface LinterResult {
+  level: LinterResultLevel;
+  message: string;
+  from: number;
+  to: number;
+  fix?: FixFn;
+  fixMessage?: string;
+}
+
+export interface RawLinterResult extends Omit<LinterResult, 'level'> {
+  level?: LinterResultLevel;
+}
+
+export class LinterPlugin {
+  protected doc: ProsemirrorNode;
+
+  private results: Array<LinterResult> = [];
+
+  constructor(doc: ProsemirrorNode) {
+    this.doc = doc;
+  }
+
+  record(result: RawLinterResult) {
+    this.results.push({
+      level: 'error',
+      ...result,
+    });
+  }
+
+  scan() {
+    return this;
+  }
+
+  getResults() {
+    return this.results;
+  }
+}

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

@@ -0,0 +1,5 @@
+export { Linter } from './Linter';
+export { LinterPlugin } from './LinterPlugin';
+export type { LinterOptions } from './Linter';
+
+export * from './plugins';

package/src/components/VWysiwygEditor/extensions/linter/plugins/BadWords.ts

@@ -0,0 +1,34 @@
+import { LinterPlugin } from '../LinterPlugin';
+
+export function BadWords(words: string[]): typeof LinterPlugin {
+  const regex = new RegExp(`\\b(${words.join('|')})\\b`);
+
+  return class BadWords extends LinterPlugin {
+    scan() {
+      this.doc.descendants((node: any, position: number) => {
+        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;
+    }
+  };
+}

package/src/components/VWysiwygEditor/extensions/linter/plugins/HeadingLevel.ts

@@ -0,0 +1,33 @@
+import { EditorView } from 'prosemirror-view';
+import { LinterPlugin, LinterResult as Issue } from '../LinterPlugin';
+
+export class HeadingLevel extends LinterPlugin {
+  fixHeader(level: number) {
+    return function ({ state, dispatch }: EditorView, issue: Issue) {
+      dispatch(state.tr.setNodeMarkup(issue.from - 1, undefined, { level }));
+    };
+  }
+
+  scan() {
+    let lastHeadLevel: number | null = 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;
+  }
+}

package/src/components/VWysiwygEditor/extensions/linter/plugins/Punctuation.ts

@@ -0,0 +1,43 @@
+import { EditorView } from 'prosemirror-view';
+import { LinterPlugin, LinterResult as Issue } from '../LinterPlugin';
+
+export class Punctuation extends LinterPlugin {
+  public regex = / ([,.!?:]) ?/g;
+
+  fix(replacement: any) {
+    return function ({ state, dispatch }: EditorView, issue: 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;
+  }
+}

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

@@ -0,0 +1,3 @@
+export { BadWords } from './BadWords';
+export { HeadingLevel } from './HeadingLevel';
+export { Punctuation } from './Punctuation';