@fastkit/vui 0.12.8 → 0.12.10

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

@@ -1,210 +0,0 @@
-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 {
-  WysiwygLinterPlugin,
-  WysiwygLinterResult as Issue,
-  WysiwygLinterFixMessage,
-} from './LinterPlugin';
-import { EditorView } from 'prosemirror-view';
-import { createWysiwygExtension } from '../../schemes';
-
-const PROBLEM_CLASS_NAME = 'v-linter__problem';
-const ISSUE_ICON_CLASS_NAME = 'v-linter__issue-icon';
-const ISSUE_DATASET_NAME = 'data-issue-id';
-
-function resolveWysiwygLinterFixMessage(message: WysiwygLinterFixMessage) {
-  return typeof message === 'function' ? message() : message;
-}
-
-function renderIcon(view: EditorView, issue: Issue) {
-  const { level = 'warning' } = issue;
-  const icon = document.createElement('div');
-  const message = resolveWysiwygLinterFixMessage(issue.message);
-
-  icon.className = `${ISSUE_ICON_CLASS_NAME} ${level}-scope`;
-  icon.setAttribute(ISSUE_DATASET_NAME, issue.id);
-
-  if (typeof message === 'string') {
-    icon.title = message;
-  }
-
-  return icon;
-}
-
-function runAllLinterPlugins(
-  doc: ProsemirrorNode,
-  plugins: Array<typeof WysiwygLinterPlugin>,
-) {
-  const decorations: [any?] = [];
-
-  const issues = plugins
-    .map((RegisteredLinterPlugin) => {
-      return new RegisteredLinterPlugin(doc).scan().getResults();
-    })
-    .flat();
-
-  issues.forEach((issue) => {
-    const { level = 'warning', icon } = issue;
-    const message = resolveWysiwygLinterFixMessage(issue.message);
-    decorations.push(
-      Decoration.inline(issue.from, issue.to, {
-        class: `${PROBLEM_CLASS_NAME} ${level}-scope`,
-        'data-issue-id': issue.id,
-        title: typeof message === 'string' ? message : undefined,
-      }),
-    );
-    if (icon) {
-      decorations.push(
-        Decoration.widget(issue.from, (view) => renderIcon(view, issue)),
-      );
-    }
-  });
-
-  const decorationSet = DecorationSet.create(doc, decorations);
-
-  return {
-    issues,
-    decorationSet,
-  };
-}
-
-export interface WysiwygLinterOptions {
-  plugins: Array<typeof WysiwygLinterPlugin>;
-}
-
-export interface WysiwygLinterStorage {
-  issues: Issue[];
-}
-
-export const WysiwygLinter = createWysiwygExtension((ctx) => {
-  function showMenu(view: EditorView, issue: Issue, event: Event) {
-    const message = resolveWysiwygLinterFixMessage(issue.message);
-    const variant = ctx.vui.setting('containedVariant');
-    const scope = ctx.vui.setting(`${issue.level}Scope`);
-
-    return ctx.vui.menu({
-      activator: event,
-      content: (stack) => (
-        <div class="v-linter__issue-menu__body">
-          <div
-            class={[
-              'v-linter__issue-menu__message',
-              `${scope}-scope ${variant}`,
-            ]}>
-            {message}
-          </div>
-          {issue.fix.length && (
-            <div class="v-linter__issue-menu__fixers">
-              {issue.fix.map((fixer, index) => (
-                <div key={index} class="v-linter__issue-menu__fixer">
-                  <button
-                    type="button"
-                    class="v-linter__issue-menu__fixer__button"
-                    onClick={() => {
-                      stack.close();
-                      fixer.handler(view, issue);
-                    }}>
-                    <span class="v-linter__issue-menu__fixer__button__message">
-                      {resolveWysiwygLinterFixMessage(fixer.message)}
-                    </span>
-                  </button>
-                </div>
-              ))}
-            </div>
-          )}
-        </div>
-      ),
-    });
-  }
-
-  return Extension.create<WysiwygLinterOptions, WysiwygLinterStorage>({
-    name: 'linter',
-
-    addOptions() {
-      return {
-        plugins: [],
-      };
-    },
-    addStorage() {
-      return {
-        issues: [],
-      };
-    },
-    addProseMirrorPlugins() {
-      const { plugins } = this.options;
-      const { storage } = this;
-
-      const runAll = (doc: ProsemirrorNode) => {
-        const { issues, decorationSet } = runAllLinterPlugins(doc, plugins);
-        storage.issues = issues;
-        return decorationSet;
-      };
-
-      const getIssue = (id: string) =>
-        storage.issues.find((issue) => issue.id === id);
-
-      const getIssueElementByEvent = (
-        source: EventTarget | null,
-      ):
-        | {
-            issue: Issue;
-          }
-        | undefined => {
-        if (!source || !(source instanceof HTMLElement)) {
-          return;
-        }
-        const issueId = source.getAttribute(ISSUE_DATASET_NAME);
-        const issue = issueId && getIssue(issueId);
-        if (!issue) return;
-
-        return {
-          issue,
-        };
-      };
-
-      const linterPlugin: Plugin<any> = new Plugin({
-        key: new PluginKey('linter'),
-        state: {
-          init(_, { doc }) {
-            return runAll(doc);
-          },
-          apply(transaction, oldState) {
-            return transaction.docChanged ? runAll(transaction.doc) : oldState;
-          },
-        },
-        props: {
-          decorations(state) {
-            return linterPlugin.getState(state);
-          },
-          handleClick(view, _, event) {
-            const info = getIssueElementByEvent(event.target);
-            if (!info) {
-              return false;
-            }
-
-            const { issue } = info;
-            const { from, to } = issue;
-
-            const focus = () =>
-              view.dispatch(
-                view.state.tr
-                  .setSelection(TextSelection.create(view.state.doc, from, to))
-                  .scrollIntoView(),
-              );
-
-            focus();
-
-            showMenu(view, issue, event);
-            return true;
-          },
-        },
-      });
-
-      return [linterPlugin];
-    },
-  });
-});

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

@@ -1,65 +0,0 @@
-import { VNodeChild } from 'vue';
-import { Node as ProsemirrorNode } from 'prosemirror-model';
-import { EditorView } from 'prosemirror-view';
-import { cheepUUID } from './utils';
-
-export type WysiwygLinterFixFn = (
-  view: EditorView,
-  issue: WysiwygLinterResult,
-) => any;
-
-export type WysiwygLinterFixMessage = string | (() => VNodeChild);
-
-export interface WysiwygLinterFixer {
-  message: WysiwygLinterFixMessage;
-  handler: WysiwygLinterFixFn;
-}
-
-export type WysiwygLinterResultLevel = 'warning' | 'error';
-
-// fixers
-export interface WysiwygLinterResult {
-  id: string;
-  icon: boolean;
-  level: WysiwygLinterResultLevel;
-  message: WysiwygLinterFixMessage;
-  from: number;
-  to: number;
-  fix: WysiwygLinterFixer[];
-}
-
-export interface RawLinterResult
-  extends Omit<WysiwygLinterResult, 'level' | 'fix' | 'id' | 'icon'> {
-  level?: WysiwygLinterResultLevel;
-  icon?: boolean;
-  fix?: WysiwygLinterFixer | WysiwygLinterFixer[];
-}
-
-export class WysiwygLinterPlugin {
-  protected doc: ProsemirrorNode;
-
-  private results: Array<WysiwygLinterResult> = [];
-
-  constructor(doc: ProsemirrorNode) {
-    this.doc = doc;
-  }
-
-  record(result: RawLinterResult) {
-    const { fix = [], icon = false } = result;
-    this.results.push({
-      level: 'error',
-      id: cheepUUID(),
-      ...result,
-      fix: Array.isArray(fix) ? fix : [fix],
-      icon,
-    });
-  }
-
-  scan() {
-    return this;
-  }
-
-  getResults() {
-    return this.results;
-  }
-}

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

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

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

@@ -1,50 +0,0 @@
-import { WysiwygLinterPlugin } from '../LinterPlugin';
-
-export function WysiwygLinterBadWords(
-  words: string[],
-): typeof WysiwygLinterPlugin {
-  const regex = new RegExp(`\\b(${words.join('|')})\\b`);
-
-  return class WysiwygLinterBadWords extends WysiwygLinterPlugin {
-    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: [
-              {
-                message: () => (
-                  <span>
-                    <code>{fixValue}</code>に修正する。
-                  </span>
-                ),
-                handler: () => {
-                  console.log('hoge');
-                },
-              },
-              {
-                message: 'どうにかする',
-                handler: () => {
-                  console.log('hoge');
-                },
-              },
-            ],
-          });
-        }
-      });
-
-      return this;
-    }
-  };
-}

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

@@ -1,39 +0,0 @@
-import { EditorView } from 'prosemirror-view';
-import {
-  WysiwygLinterPlugin,
-  WysiwygLinterResult as Issue,
-} from '../LinterPlugin';
-
-export class WysiwygLinterHeadingLevel extends WysiwygLinterPlugin {
-  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: {
-              message: '修正する',
-              handler: this.fixHeader(lastHeadLevel + 1),
-            },
-          });
-        }
-        lastHeadLevel = level;
-      }
-    });
-
-    return this;
-  }
-}

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

@@ -1,49 +0,0 @@
-import { EditorView } from 'prosemirror-view';
-import {
-  WysiwygLinterPlugin,
-  WysiwygLinterResult as Issue,
-} from '../LinterPlugin';
-
-export class WysiwygLinterPunctuation extends WysiwygLinterPlugin {
-  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: {
-            message: 'Fix it!!!',
-            handler: this.fix(`${matches[1]} `),
-          },
-        });
-      }
-    });
-
-    return this;
-  }
-}

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

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

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

@@ -1,28 +0,0 @@
-let IDX = 256,
-  BUFFER: any;
-const HEX: any = [];
-while (IDX--) HEX[IDX] = (IDX + 256).toString(16).substring(1);
-
-export function cheepUUID() {
-  let i = 0,
-    num,
-    out = '';
-
-  if (!BUFFER || IDX + 16 > 256) {
-    BUFFER = Array((i = 256));
-    while (i--) BUFFER[i] = (256 * Math.random()) | 0;
-    i = IDX = 0;
-  }
-
-  for (; i < 16; i++) {
-    num = BUFFER[IDX + i];
-    if (i == 6) out += HEX[(num & 15) | 64];
-    else if (i == 8) out += HEX[(num & 63) | 128];
-    else out += HEX[num];
-
-    if (i & 1 && i > 1 && i < 11) out += '-';
-  }
-
-  IDX++;
-  return out;
-}

package/src/components/VWysiwygEditor/index.ts

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