@fastkit/vui 0.7.59 → 0.7.61

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';

package/src/components/VWysiwygEditor/index.ts

@@ -1,3 +1,4 @@
 export * from './VWysiwygEditor';
+export * from './extensions';
 export * from './tools';
 export * from './schemes';

package/src/components/VWysiwygEditor/schemes.ts

@@ -1,12 +1,116 @@
 import { type VuiService } from '../../service';
-import { type Editor, type Extensions } from '@tiptap/vue-3';
+import {
+  type Editor,
+  type Extensions,
+  type AnyExtension,
+  type EditorOptions,
+} from '@tiptap/vue-3';
 import { type IconName } from '../VIcon';
 
+const EDITOR_EVENTS = [
+  'beforeCreate',
+  'create',
+  'update',
+  'selectionUpdate',
+  'transaction',
+  'focus',
+  'blur',
+  'destroy',
+] as const;
+
+type PrefixedEventName<S extends string> = `on${Capitalize<S>}`;
+
+const prefixedEventName = <S extends string>(
+  source: S,
+): PrefixedEventName<S> => {
+  return `on${source.charAt(0).toUpperCase()}${source.slice(1)}` as any;
+};
+
+export type WysiwygEditorEvent = typeof EDITOR_EVENTS[number];
+
+export type WysiwygEditorPrefixedEvent = PrefixedEventName<WysiwygEditorEvent>;
+
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+export interface WysiwygEditorEventsOptions
+  extends Partial<Pick<EditorOptions, WysiwygEditorPrefixedEvent>> {}
+
+export type WysiwygEditorEventsBucket = {
+  [EV in WysiwygEditorEvent]: NonNullable<
+    WysiwygEditorEventsOptions[PrefixedEventName<EV>]
+  >[];
+};
+
+export class WysiwygEditorInitializeContext {
+  readonly listeners: WysiwygEditorEventsBucket = {} as any;
+
+  constructor(opts: WysiwygEditorEventsOptions = {}) {
+    EDITOR_EVENTS.forEach((event) => {
+      this.listeners[event] = [];
+      const prefixed = prefixedEventName(event);
+      const fn = opts[prefixed];
+      fn && this.listeners[event].push(fn as any);
+    });
+  }
+
+  on<EV extends WysiwygEditorEvent>(
+    ev: EV,
+    handler: NonNullable<WysiwygEditorEventsOptions[PrefixedEventName<EV>]>,
+  ) {
+    this.listeners[ev].push(handler);
+    return () => this.off(ev, handler);
+  }
+
+  off<EV extends WysiwygEditorEvent>(
+    ev: EV,
+    handler: NonNullable<WysiwygEditorEventsOptions[PrefixedEventName<EV>]>,
+  ) {
+    this.listeners[ev] = this.listeners[ev].filter(
+      (_handler) => _handler !== handler,
+    ) as any;
+  }
+
+  editorOptions() {
+    const opts: WysiwygEditorEventsOptions = {};
+
+    EDITOR_EVENTS.forEach((event) => {
+      const prefixed = prefixedEventName(event);
+      opts[prefixed] = (props) => {
+        const handlers = this.listeners[event];
+        handlers.forEach((handler) => {
+          handler(props as any);
+        });
+      };
+    });
+
+    return opts;
+  }
+}
+
 export interface WysiwygEditorContext {
   editor: Editor;
   vui: VuiService;
 }
 
+export type WysiwygExtensionFactory = (
+  ctx: WysiwygEditorInitializeContext,
+) => AnyExtension;
+
+export type RawWysiwygExtension = AnyExtension | WysiwygExtensionFactory;
+
+function resolveRawWysiwygExtension(
+  raw: RawWysiwygExtension,
+  ctx: WysiwygEditorInitializeContext,
+): AnyExtension {
+  return typeof raw === 'function' ? raw(ctx) : raw;
+}
+
+export function resolveRawWysiwygExtensions(
+  raws: RawWysiwygExtension[],
+  ctx: WysiwygEditorInitializeContext,
+) {
+  return raws.map((raw) => resolveRawWysiwygExtension(raw, ctx));
+}
+
 export interface WysiwygEditorTool {
   key: string;
   icon: IconName | ((ctx: WysiwygEditorContext) => IconName);
@@ -39,13 +143,13 @@ export interface ResolvedWysiwygEditorSettings {
 }
 
 export function resolveRawWysiwygEditorTools(
-  raws: RawWysiwygEditorTool[],
+  rawTools: RawWysiwygEditorTool[],
   vui: VuiService,
 ): ResolvedWysiwygEditorSettings {
   const tools: WysiwygEditorTool[] = [];
   const extensions: Extensions = [];
 
-  raws.forEach((raw) => {
+  rawTools.forEach((raw) => {
     let resolved = resolveRawWysiwygEditorTool(raw, vui);
     if (!Array.isArray(resolved)) {
       resolved = [resolved];