@fastkit/vui 0.7.59 → 0.7.65

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

@@ -0,0 +1,65 @@
+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

@@ -0,0 +1,5 @@
+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

@@ -0,0 +1,50 @@
+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

@@ -0,0 +1,39 @@
+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

@@ -0,0 +1,49 @@
+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

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

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

@@ -0,0 +1,28 @@
+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,3 +1,4 @@
 export * from './VWysiwygEditor';
+export * from './extensions';
 export * from './tools';
 export * from './schemes';

package/src/components/VWysiwygEditor/schemes.ts

@@ -1,15 +1,201 @@
 import { type VuiService } from '../../service';
-import { type Editor, type Extensions } from '@tiptap/vue-3';
+import {
+  type Editor,
+  type Extensions,
+  type Node,
+  type Extension,
+  type Mark,
+  type AnyExtension,
+  type EditorOptions,
+} from '@tiptap/vue-3';
 import { type IconName } from '../VIcon';
+import { VNodeChild } from 'vue';
+
+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;
+  private readonly _vui: () => VuiService;
+
+  get vui() {
+    return this._vui();
+  }
+
+  constructor(
+    vuiGetter: () => VuiService,
+    opts: WysiwygEditorEventsOptions = {},
+  ) {
+    this._vui = vuiGetter;
+
+    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<Options = any, Storage = any> = (
+  ctx: WysiwygEditorInitializeContext,
+) =>
+  | Extension<Options, Storage>
+  | Node<Options, Storage>
+  | Mark<Options, Storage>;
+
+export interface CreatedWysiwygExtension<Options = any, Storage = any> {
+  __isCreatedWysiwygExtension: true;
+  _configs: Partial<Options>[];
+  configure(
+    options?: Partial<Options>,
+  ): CreatedWysiwygExtension<Options, Storage>;
+  raw: WysiwygExtensionSource<Options, Storage>;
+}
+
+export type WysiwygExtensionSource<Options = any, Storage = any> =
+  | Extension<Options, Storage>
+  | Node<Options, Storage>
+  | Mark<Options, Storage>
+  | WysiwygExtensionFactory<Options, Storage>;
+
+export type RawWysiwygExtension<Options = any, Storage = any> =
+  | WysiwygExtensionSource<Options, Storage>
+  | CreatedWysiwygExtension<Options, Storage>;
+
+// export function createWysiwygExtension<Options = any, Storage = any>(
+//   extension: Extension<Options, Storage>,
+// ): Extension<Options, Storage>;
+// export function createWysiwygExtension<Options = any, Storage = any>(
+//   node: Node<Options, Storage>,
+// ): Node<Options, Storage>;
+// export function createWysiwygExtension<Options = any, Storage = any>(
+//   mark: Mark<Options, Storage>,
+// ): Mark<Options, Storage>;
+// export function createWysiwygExtension<Options = any, Storage = any>(
+//   factory: WysiwygExtensionFactory<Options, Storage>,
+// ): WysiwygExtensionFactory<Options, Storage>;
+
+function isCreatedWysiwygExtension<Options = any, Storage = any>(
+  source: unknown,
+): source is CreatedWysiwygExtension<Options, Storage> {
+  return (
+    !!source &&
+    typeof source === 'object' &&
+    (source as CreatedWysiwygExtension).__isCreatedWysiwygExtension === true
+  );
+}
+
+export function createWysiwygExtension<Options = any, Storage = any>(
+  extension: WysiwygExtensionSource<Options, Storage>,
+) {
+  const ext: CreatedWysiwygExtension<Options, Storage> = {
+    __isCreatedWysiwygExtension: true,
+    _configs: [],
+    configure: (opts) => {
+      opts && ext._configs.push(opts);
+      return ext;
+    },
+    raw: extension,
+  };
+  return ext;
+}
+
+function resolveRawWysiwygExtension(
+  raw: RawWysiwygExtension,
+  ctx: WysiwygEditorInitializeContext,
+): AnyExtension {
+  if (isCreatedWysiwygExtension(raw)) {
+    const { raw: _raw, _configs } = raw;
+    let ext = typeof _raw === 'function' ? _raw(ctx) : _raw;
+    _configs.forEach((config) => {
+      ext = ext.configure(config);
+    });
+    return ext;
+  }
+  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);
+  icon:
+    | IconName
+    | ((ctx: WysiwygEditorContext) => IconName | (() => VNodeChild));
   active?: boolean | ((ctx: WysiwygEditorContext) => boolean);
   disabled?: boolean | ((ctx: WysiwygEditorContext) => boolean);
   onClick: (ctx: WysiwygEditorContext, ev: MouseEvent) => any;
@@ -39,13 +225,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];

package/src/components/VWysiwygEditor/tools/color.scss

@@ -0,0 +1,140 @@
+:root {
+  --v-wysiwyg-color-tool: 30px;
+}
+
+.v-wysiwyg-color-tool {
+  &__button {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    vertical-align: bottom;
+
+    &__bar {
+      position: absolute;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      display: block;
+      height: 2px;
+      background: currentColor;
+    }
+  }
+
+  &__menu {
+    .v-dialog__content {
+      min-width: 0;
+    }
+
+    .v-dialog__body {
+      padding: 2px;
+    }
+  }
+
+  &__items {
+    --item-size: var(--v-wysiwyg-color-tool);
+
+    display: inline-flex;
+    flex-wrap: wrap;
+    align-items: center;
+    max-width: calc(var(--item-size) * 5);
+    vertical-align: bottom;
+
+    &--with-label {
+      display: flex;
+      flex-direction: column;
+      // flex-wrap: nowrap;
+      align-items: flex-start;
+      max-width: none;
+      padding: 2px;
+    }
+  }
+
+  &__item {
+    --focus-offset: calc(var(--item-size) * 0.05);
+
+    position: relative;
+    display: flex;
+    flex-basis: var(--item-size);
+    align-items: center;
+    width: var(--item-size);
+    height: var(--item-size);
+    padding: 0;
+    margin: 0;
+    // margin: 2px;
+    cursor: pointer;
+    background: transparent;
+    border: 0;
+    border-radius: 0;
+    outline: 0;
+    appearance: none;
+
+    &__color {
+      position: relative;
+      flex: 0 0 var(--item-size);
+      width: var(--item-size);
+      height: var(--item-size);
+
+      &::before {
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        display: block;
+        content: '';
+        background: currentColor;
+        border: solid 1px transparent;
+        transition: all 0.15s;
+      }
+    }
+
+    &__name {
+      position: relative;
+      padding: 0 8px;
+      font-size: 12px;
+      white-space: nowrap;
+    }
+
+    &:hover &__color,
+    &:focus &__color {
+      &::before {
+        top: var(--focus-offset);
+        right: var(--focus-offset);
+        bottom: var(--focus-offset);
+        left: var(--focus-offset);
+        border-color: rgba(0, 0, 0, 0.1);
+      }
+    }
+  }
+
+  &__items--with-label &__item {
+    flex-basis: auto;
+    width: auto;
+    width: 100%;
+
+    &::before {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      display: block;
+      content: '';
+      background: currentColor;
+      opacity: 0;
+      transition: opacity 0.15s;
+    }
+
+    &:hover,
+    &:focus {
+      &::before {
+        opacity: 0.1;
+      }
+    }
+
+    & + .v-wysiwyg-color-tool__item {
+      margin-top: 2px;
+    }
+  }
+}

package/src/components/VWysiwygEditor/tools/color.tsx

@@ -0,0 +1,90 @@
+import './color.scss';
+
+import { VNodeChild } from 'vue';
+import { WysiwygColorExtension } from '../extensions';
+import { type VuiService } from '../../../service';
+import { WysiwygEditorToolFactory, WysiwygEditorTool } from '../schemes';
+import TextStyle from '@tiptap/extension-text-style';
+import { VIcon } from '../../VIcon';
+
+export interface WysiwygColorItem {
+  key?: string | number;
+  name?: VNodeChild | ((vui: VuiService) => VNodeChild);
+  color: string | null;
+}
+
+export interface CreateWysiwygColorToolOptions {
+  items: WysiwygColorItem[];
+  withLabel?: boolean;
+}
+
+export function createWysiwygColorTool(opts: CreateWysiwygColorToolOptions) {
+  const WysiwygColorTool: WysiwygEditorToolFactory = (vui) => {
+    const tool: WysiwygEditorTool = {
+      key: 'textColor',
+      // active: ({ editor }) => editor.isActive('textStyle'),
+      icon:
+        ({ editor }) =>
+        () => {
+          const color: string | undefined =
+            editor.getAttributes('textStyle').color;
+          const style = { color };
+          return (
+            <span class="v-wysiwyg-color-tool__button">
+              <VIcon
+                class="v-wysiwyg-color-tool__button__icon"
+                name={vui.icon('editorTextColor')}
+              />
+              <span class="v-wysiwyg-color-tool__button__bar" style={style} />
+            </span>
+          );
+        },
+      onClick: (ctx, ev) => {
+        ctx.vui.menu({
+          class: 'v-wysiwyg-color-tool__menu',
+          activator: ev,
+          content: (stack) => (
+            <div
+              class={[
+                'v-wysiwyg-color-tool__items',
+                { 'v-wysiwyg-color-tool__items--with-label': opts.withLabel },
+              ]}>
+              {opts.items.map((item, index) => (
+                <button
+                  key={item.key == null ? index : item.key}
+                  class="v-wysiwyg-color-tool__item"
+                  type="button"
+                  onClick={() => {
+                    const { color } = item;
+                    let command = ctx.editor.chain().focus();
+                    if (color) {
+                      command = command.setColor(color);
+                    } else {
+                      command = command.unsetColor();
+                    }
+                    command.run();
+                    stack.close();
+                  }}>
+                  <span
+                    class="v-wysiwyg-color-tool__item__color"
+                    style={item.color ? { color: item.color } : {}}
+                  />
+                  {opts.withLabel && (
+                    <span class="v-wysiwyg-color-tool__item__name">
+                      {item.name}
+                    </span>
+                  )}
+                </button>
+              ))}
+            </div>
+          ),
+        });
+      },
+      floating: true,
+      extensions: [TextStyle, WysiwygColorExtension],
+    };
+    return tool;
+  };
+
+  return WysiwygColorTool;
+}

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

@@ -5,4 +5,4 @@ export * from './format-underline';
 export * from './history';
 export * from './link';
 export * from './ordered-list';
-export * from './text-color';
+export * from './color';