@shwfed/config 3.0.13 → 3.0.15

package/dist/runtime/components/form/fields/2026-07-18/com.shwfed.form.field.richtext/RichTextEditor.vue

@@ -0,0 +1,269 @@
+<script setup>
+import { Icon } from "@iconify/vue";
+import { EditorContent, useEditor } from "@tiptap/vue-3";
+import { computed, ref, watch } from "vue";
+import { useI18n } from "vue-i18n";
+import { cn } from "../../../../../utils/cn";
+import { Toggle } from "../../../../ui/toggle";
+import { richTextExtensions } from "./extensions";
+import { resolveFeatures } from "./features";
+defineOptions({ name: "ShwfedRichTextEditor" });
+const props = defineProps({
+  modelValue: { type: String, required: false, default: "" },
+  placeholder: { type: String, required: false },
+  editable: { type: Boolean, required: false, default: true },
+  features: { type: Object, required: false },
+  id: { type: String, required: false },
+  class: { type: [Boolean, null, String, Object, Array], required: false, skipCheck: true }
+});
+const emits = defineEmits(["update:modelValue", "blur"]);
+const { t } = useI18n({
+  inheritLocale: true,
+  messages: {
+    zh: {
+      "richtext-bold": "\u52A0\u7C97",
+      "richtext-italic": "\u659C\u4F53",
+      "richtext-underline": "\u4E0B\u5212\u7EBF",
+      "richtext-strike": "\u5220\u9664\u7EBF",
+      "richtext-align-left": "\u5DE6\u5BF9\u9F50",
+      "richtext-align-center": "\u5C45\u4E2D\u5BF9\u9F50",
+      "richtext-align-right": "\u53F3\u5BF9\u9F50",
+      "richtext-indent": "\u589E\u52A0\u7F29\u8FDB",
+      "richtext-outdent": "\u51CF\u5C11\u7F29\u8FDB",
+      "richtext-bullet-list": "\u65E0\u5E8F\u5217\u8868",
+      "richtext-ordered-list": "\u6709\u5E8F\u5217\u8868"
+    },
+    en: {
+      "richtext-bold": "Bold",
+      "richtext-italic": "Italic",
+      "richtext-underline": "Underline",
+      "richtext-strike": "Strikethrough",
+      "richtext-align-left": "Align left",
+      "richtext-align-center": "Align center",
+      "richtext-align-right": "Align right",
+      "richtext-indent": "Increase indent",
+      "richtext-outdent": "Decrease indent",
+      "richtext-bullet-list": "Bulleted list",
+      "richtext-ordered-list": "Numbered list"
+    },
+    ja: {
+      "richtext-bold": "\u592A\u5B57",
+      "richtext-italic": "\u659C\u4F53",
+      "richtext-underline": "\u4E0B\u7DDA",
+      "richtext-strike": "\u53D6\u308A\u6D88\u3057\u7DDA",
+      "richtext-align-left": "\u5DE6\u63C3\u3048",
+      "richtext-align-center": "\u4E2D\u592E\u63C3\u3048",
+      "richtext-align-right": "\u53F3\u63C3\u3048",
+      "richtext-indent": "\u30A4\u30F3\u30C7\u30F3\u30C8\u3092\u5897\u3084\u3059",
+      "richtext-outdent": "\u30A4\u30F3\u30C7\u30F3\u30C8\u3092\u6E1B\u3089\u3059",
+      "richtext-bullet-list": "\u7B87\u6761\u66F8\u304D",
+      "richtext-ordered-list": "\u756A\u53F7\u4ED8\u304D\u30EA\u30B9\u30C8"
+    }
+  }
+});
+const features = computed(() => props.features ?? resolveFeatures());
+const tick = ref(0);
+function currentHtml() {
+  const editorInstance = editor.value;
+  if (!editorInstance) return "";
+  return editorInstance.isEmpty ? "" : editorInstance.getHTML();
+}
+const editor = useEditor({
+  content: props.modelValue,
+  editable: props.editable,
+  extensions: richTextExtensions({
+    features: features.value,
+    getPlaceholder: () => props.placeholder ?? ""
+  }),
+  // The field stores HTML, not Markdown. Input rules are what turn `**x**`,
+  // `- `, `# ` and friends into nodes as you type, and paste rules do the same
+  // for pasted text — both are off wholesale. Note this is not the whole story:
+  // `OrderedList` also ships a `handlePaste` PLUGIN that neither switch
+  // reaches, which `extensions.ts` strips separately.
+  enableInputRules: false,
+  enablePasteRules: false,
+  editorProps: {
+    attributes: {
+      class: "prose prose-sm prose-zinc max-w-none focus:outline-none",
+      ...props.id ? { id: props.id } : {}
+    }
+  },
+  onUpdate: () => emits("update:modelValue", currentHtml()),
+  onBlur: () => emits("blur"),
+  onTransaction: () => {
+    tick.value++;
+  }
+});
+watch(() => props.modelValue, (next) => {
+  if (!editor.value) return;
+  const incoming = next ?? "";
+  if (incoming === currentHtml()) return;
+  editor.value.commands.setContent(incoming, { emitUpdate: false });
+});
+watch(() => props.editable, (editable) => {
+  editor.value?.setEditable(editable);
+});
+function run(fn) {
+  if (!editor.value) return;
+  fn(editor.value.chain().focus()).run();
+}
+function isActive(name) {
+  void tick.value;
+  return editor.value?.isActive(name) ?? false;
+}
+const ALL_DECORATIONS = [
+  { kind: "bold", icon: "fluent:text-bold-20-regular", label: "richtext-bold", toggle: (c) => c.toggleBold() },
+  { kind: "italic", icon: "fluent:text-italic-20-regular", label: "richtext-italic", toggle: (c) => c.toggleItalic() },
+  { kind: "underline", icon: "fluent:text-underline-20-regular", label: "richtext-underline", toggle: (c) => c.toggleUnderline() },
+  { kind: "strike", icon: "fluent:text-strikethrough-20-regular", label: "richtext-strike", toggle: (c) => c.toggleStrike() }
+];
+const decorationButtons = computed(() => ALL_DECORATIONS.filter((d) => features.value.inline.has(d.kind)));
+const ALIGNMENTS = [
+  { value: "left", icon: "fluent:text-align-left-20-regular", label: "richtext-align-left" },
+  { value: "center", icon: "fluent:text-align-center-20-regular", label: "richtext-align-center" },
+  { value: "right", icon: "fluent:text-align-right-20-regular", label: "richtext-align-right" }
+];
+function setAlign(value) {
+  run((chain) => chain.setTextAlign(value));
+}
+function alignActive(value) {
+  void tick.value;
+  const instance = editor.value;
+  if (!instance) return false;
+  return (instance.getAttributes("paragraph").textAlign ?? "left") === value;
+}
+function indent() {
+  run((chain) => chain.first(({ commands }) => [
+    () => commands.sinkListItem("listItem"),
+    () => commands.indent()
+  ]));
+}
+function outdent() {
+  run((chain) => chain.first(({ commands }) => [
+    () => commands.liftListItem("listItem"),
+    () => commands.outdent()
+  ]));
+}
+function canIndent() {
+  void tick.value;
+  const instance = editor.value;
+  if (!instance) return false;
+  return instance.can().sinkListItem("listItem") || instance.can().indent();
+}
+function canOutdent() {
+  void tick.value;
+  const instance = editor.value;
+  if (!instance) return false;
+  return instance.can().liftListItem("listItem") || instance.can().outdent();
+}
+</script>
+
+<template>
+  <div :class="cn('flex flex-col overflow-hidden rounded-md border border-zinc-200 bg-white', props.class)">
+    <!-- `mousedown.prevent` throughout: without it every toolbar click blurs
+         the editor, which fires the field's commit before the command runs. -->
+    <div
+      class="flex flex-wrap items-center gap-0.5 border-b border-zinc-200 bg-zinc-50/60 px-1.5 py-1"
+      @mousedown.prevent
+    >
+      <Toggle
+        v-for="decoration in decorationButtons"
+        :key="decoration.kind"
+        size="xs"
+        :aria-label="t(decoration.label)"
+        :title="t(decoration.label)"
+        :model-value="isActive(decoration.kind)"
+        :disabled="!props.editable"
+        @update:model-value="run(decoration.toggle)"
+      >
+        <Icon :icon="decoration.icon" />
+      </Toggle>
+
+      <div
+        v-if="decorationButtons.length"
+        class="mx-1 h-5 w-px bg-zinc-200"
+      />
+
+      <Toggle
+        v-for="alignment in ALIGNMENTS"
+        :key="alignment.value"
+        size="xs"
+        :aria-label="t(alignment.label)"
+        :title="t(alignment.label)"
+        :model-value="alignActive(alignment.value)"
+        :disabled="!props.editable"
+        @update:model-value="setAlign(alignment.value)"
+      >
+        <Icon :icon="alignment.icon" />
+      </Toggle>
+
+      <div class="mx-1 h-5 w-px bg-zinc-200" />
+
+      <!-- `Toggle` with a pinned `false`, not `Button`: indent and outdent are
+           momentary actions with no on-state, but they sit in a row of toggles
+           and have to carry the same size, padding and hover treatment. Pinning
+           the model value keeps them from ever rendering as pressed. -->
+      <Toggle
+        size="xs"
+        :aria-label="t('richtext-outdent')"
+        :title="t('richtext-outdent')"
+        :model-value="false"
+        :disabled="!props.editable || !canOutdent()"
+        @update:model-value="outdent"
+      >
+        <Icon icon="fluent:text-indent-decrease-ltr-20-regular" />
+      </Toggle>
+      <Toggle
+        size="xs"
+        :aria-label="t('richtext-indent')"
+        :title="t('richtext-indent')"
+        :model-value="false"
+        :disabled="!props.editable || !canIndent()"
+        @update:model-value="indent"
+      >
+        <Icon icon="fluent:text-indent-increase-ltr-20-regular" />
+      </Toggle>
+
+      <div
+        v-if="features.block.has('bulletList') || features.block.has('orderedList')"
+        class="mx-1 h-5 w-px bg-zinc-200"
+      />
+
+      <Toggle
+        v-if="features.block.has('bulletList')"
+        size="xs"
+        :aria-label="t('richtext-bullet-list')"
+        :title="t('richtext-bullet-list')"
+        :model-value="isActive('bulletList')"
+        :disabled="!props.editable"
+        @update:model-value="run((chain) => chain.toggleBulletList())"
+      >
+        <Icon icon="fluent:text-bullet-list-ltr-20-regular" />
+      </Toggle>
+      <Toggle
+        v-if="features.block.has('orderedList')"
+        size="xs"
+        :aria-label="t('richtext-ordered-list')"
+        :title="t('richtext-ordered-list')"
+        :model-value="isActive('orderedList')"
+        :disabled="!props.editable"
+        @update:model-value="run((chain) => chain.toggleOrderedList())"
+      >
+        <Icon icon="fluent:text-number-list-ltr-20-regular" />
+      </Toggle>
+    </div>
+
+    <!-- `v-if` is the SSR guard: `useEditor` builds the instance in
+         `onMounted`, so `editor` is undefined during the server render.
+         (`immediatelyRender` is a @tiptap/react option — it does nothing here.) -->
+    <EditorContent
+      v-if="editor"
+      :editor="editor"
+      class="rt-content min-h-32 flex-1 overflow-y-auto px-3 py-2"
+    />
+  </div>
+</template>
+
+<style scoped>
+.rt-content :deep(.ProseMirror){outline:none}.rt-content :deep(.ProseMirror ul){list-style-position:outside;list-style-type:disc}.rt-content :deep(.ProseMirror ol){list-style-position:outside;list-style-type:decimal}.rt-content :deep(.ProseMirror ul ul){list-style-type:circle}.rt-content :deep(.ProseMirror ul ul ul){list-style-type:square}.rt-content :deep(.ProseMirror ol ol){list-style-type:lower-alpha}.rt-content :deep(.ProseMirror ol ol ol){list-style-type:lower-roman}.rt-content :deep(.ProseMirror li::marker){color:var(--color-zinc-500)}.rt-content :deep(.ProseMirror li>p){margin-bottom:0;margin-top:0}.rt-content :deep(.is-editor-empty:first-child:before){color:var(--color-zinc-300);content:attr(data-placeholder);float:left;height:0;pointer-events:none}
+</style>

package/dist/runtime/components/form/fields/2026-07-18/com.shwfed.form.field.richtext/RichTextEditor.vue.d.ts

@@ -0,0 +1,33 @@
+import type { HTMLAttributes } from 'vue';
+import { type RichTextFeatures } from './features.js';
+type __VLS_Props = {
+    modelValue?: string;
+    placeholder?: string;
+    editable?: boolean;
+    /**
+     * Which capabilities the config left switched on. Note that this is read once
+     * when the editor is constructed — the extension set cannot be swapped on a
+     * live instance. Callers that let a user flip these at runtime (the config
+     * editor's live preview) must re-key this component; `runtime.vue` does.
+     */
+    features?: RichTextFeatures;
+    /**
+     * Declared rather than left to fall through: it has to land on the
+     * contenteditable so the field's `<FieldLabel for>` focuses the editor.
+     * As an undeclared attr it would settle on the wrapper div instead.
+     */
+    id?: string;
+    class?: HTMLAttributes['class'];
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    blur: () => any;
+    "update:modelValue": (payload: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onBlur?: (() => any) | undefined;
+    "onUpdate:modelValue"?: ((payload: string) => any) | undefined;
+}>, {
+    modelValue: string;
+    editable: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/form/fields/2026-07-18/com.shwfed.form.field.richtext/config.d.vue.ts

@@ -0,0 +1,107 @@
+import { type Value } from './schema.js';
+type __VLS_ModelProps = {
+    modelValue: Value;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: {
+        readonly label?: readonly [{
+            readonly locale: "zh";
+            readonly message: string;
+        }, ...{
+            readonly locale: "en" | "ja" | "ko";
+            readonly message: string;
+        }[]] | undefined;
+        readonly disabled?: string | undefined;
+        readonly type: "com.shwfed.form.field.richtext";
+        readonly id: string;
+        readonly inline: readonly ("bold" | "strike" | "italic" | "underline")[];
+        readonly hidden?: string | undefined;
+        readonly block: readonly ("bulletList" | "orderedList")[];
+        readonly tooltip?: readonly [{
+            readonly locale: "zh";
+            readonly message: string;
+        }, ...{
+            readonly locale: "en" | "ja" | "ko";
+            readonly message: string;
+        }[]] | undefined;
+        readonly required?: string | undefined;
+        readonly displayName?: string | undefined;
+        readonly compatibilityDate: "2026-07-18";
+        readonly placeholder?: readonly [{
+            readonly locale: "zh";
+            readonly message: string;
+        }, ...{
+            readonly locale: "en" | "ja" | "ko";
+            readonly message: string;
+        }[]] | undefined;
+        readonly readonly?: string | undefined;
+        readonly binding?: string | undefined;
+        readonly derived?: {
+            readonly mode: "formula" | "prefill";
+            readonly expression: string;
+        } | undefined;
+        readonly validations?: readonly {
+            readonly message: readonly [{
+                readonly locale: "zh";
+                readonly message: string;
+            }, ...{
+                readonly locale: "en" | "ja" | "ko";
+                readonly message: string;
+            }[]];
+            readonly warning?: boolean | undefined;
+            readonly when: string;
+        }[] | undefined;
+    }) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_ModelProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: {
+        readonly label?: readonly [{
+            readonly locale: "zh";
+            readonly message: string;
+        }, ...{
+            readonly locale: "en" | "ja" | "ko";
+            readonly message: string;
+        }[]] | undefined;
+        readonly disabled?: string | undefined;
+        readonly type: "com.shwfed.form.field.richtext";
+        readonly id: string;
+        readonly inline: readonly ("bold" | "strike" | "italic" | "underline")[];
+        readonly hidden?: string | undefined;
+        readonly block: readonly ("bulletList" | "orderedList")[];
+        readonly tooltip?: readonly [{
+            readonly locale: "zh";
+            readonly message: string;
+        }, ...{
+            readonly locale: "en" | "ja" | "ko";
+            readonly message: string;
+        }[]] | undefined;
+        readonly required?: string | undefined;
+        readonly displayName?: string | undefined;
+        readonly compatibilityDate: "2026-07-18";
+        readonly placeholder?: readonly [{
+            readonly locale: "zh";
+            readonly message: string;
+        }, ...{
+            readonly locale: "en" | "ja" | "ko";
+            readonly message: string;
+        }[]] | undefined;
+        readonly readonly?: string | undefined;
+        readonly binding?: string | undefined;
+        readonly derived?: {
+            readonly mode: "formula" | "prefill";
+            readonly expression: string;
+        } | undefined;
+        readonly validations?: readonly {
+            readonly message: readonly [{
+                readonly locale: "zh";
+                readonly message: string;
+            }, ...{
+                readonly locale: "en" | "ja" | "ko";
+                readonly message: string;
+            }[]];
+            readonly warning?: boolean | undefined;
+            readonly when: string;
+        }[] | undefined;
+    }) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;