starfish-form-custom 1.0.32 → 1.0.33

package/dist/{starfish-form-627ee711.mjs → starfish-form-4c2ab774.mjs}

@@ -3,7 +3,7 @@ import 'element-plus/es/components/base/style/css';
 import 'element-plus/es/components/form/style/css';
 import 'element-plus/es/components/form-item/style/css';
 import { defineComponent, getCurrentInstance, ref, onMounted, openBlock, createElementBlock, createVNode, mergeProps, withCtx, Fragment, renderList, createBlock, resolveDynamicComponent, createCommentVNode, toRaw } from 'vue';
-import { _ as _export_sfc } from './main-a797684b.mjs';
+import { _ as _export_sfc } from './main-8dad66de.mjs';
 import 'element-plus/es/components/icon/style/css';
 import 'element-plus/es/components/input/style/css';
 import 'element-plus/es/components/checkbox/style/css';
@@ -27,6 +27,7 @@ import 'element-plus/es/components/checkbox-group/style/css';
 import 'element-plus/es/components/color-picker/style/css';
 import 'element-plus/es/components/date-picker/style/css';
 import 'element-plus/es/components/radio/style/css';
+import 'remixicon/fonts/remixicon.symbol.svg';
 import 'element-plus/es/components/slider/style/css';
 import 'element-plus/es/components/switch/style/css';
 import 'element-plus/es/components/time-select/style/css';

package/dist/starfish-form.mjs

@@ -1,4 +1,4 @@
-export { D as Dynamicform, m as default } from './main-a797684b.mjs';
+export { D as Dynamicform, m as default } from './main-8dad66de.mjs';
 import 'vue';
 import 'element-plus/es';
 import 'element-plus/es/components/base/style/css';
@@ -25,6 +25,7 @@ import 'element-plus/es/components/checkbox-group/style/css';
 import 'element-plus/es/components/color-picker/style/css';
 import 'element-plus/es/components/date-picker/style/css';
 import 'element-plus/es/components/radio/style/css';
+import 'remixicon/fonts/remixicon.symbol.svg';
 import 'element-plus/es/components/slider/style/css';
 import 'element-plus/es/components/switch/style/css';
 import 'element-plus/es/components/time-select/style/css';

package/dist/style.css

@@ -12,7 +12,50 @@
 .control > div[data-v-4ce4907e] {
   display: flex;
   align-items: center;
-}.starfish-editor .el-form-item__content,
+}
+.menu-item[data-v-398f2226] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  background: white;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+.menu-item[data-v-398f2226]:hover {
+  background-color: #f0f0f0;
+  border-color: #999;
+}
+.menu-item.is-active[data-v-398f2226] {
+  background-color: #e0e0e0;
+  border-color: #666;
+}
+.remix[data-v-398f2226] {
+  width: 16px;
+  height: 16px;
+}
+
+.editor__header[data-v-45d3fb0a] {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 8px 12px;
+  border: 1px solid #DCDFE6;
+  border-bottom: none;
+  border-radius: 4px 4px 0 0;
+  background-color: #f8f9fa;
+  flex-wrap: wrap;
+}
+.divider[data-v-45d3fb0a] {
+  width: 1px;
+  height: 20px;
+  background-color: #DCDFE6;
+  margin: 0 4px;
+}
+.starfish-editor .el-form-item__content,
 .starfish-form .el-form-item__content,
 .starfish-dynamicform .el-form-item__content {
   margin-left: 0 !important;
@@ -424,7 +467,25 @@
   width: 100%;
   min-height: 60px;
   height: 100%;
-}.cm-gutters.cm-gutters-before {
+}
+.rich-text-editor[data-v-5e5c12c4] {
+  min-height: 200px;
+}
+[data-v-5e5c12c4] .editor-content {
+  min-height: 200px;
+}
+[data-v-5e5c12c4] .ProseMirror {
+  min-height: 180px;
+  outline: none;
+}
+[data-v-5e5c12c4] .ProseMirror p.is-editor-empty:first-child::before {
+  color: #adb5bd;
+  content: attr(data-placeholder);
+  float: left;
+  height: 0;
+  pointer-events: none;
+}
+.cm-gutters.cm-gutters-before {
   background: #133F63;
 }.el-collapse-item {
   border: 1px solid #ebeef5;

package/dist/types/form/src/common/formAction.vue.d.ts

@@ -76,8 +76,8 @@ declare const _sfc_main: DefineComponent<{
         default: boolean;
     };
 }>>, {
-    drag: boolean;
     data: Record<string, any>;
+    drag: boolean;
     item: Record<string, any>;
     labelalign: string;
     isForm: boolean;

package/dist/types/form/src/components/RichText/MenuBar.vue.d.ts

@@ -0,0 +1,34 @@
+import type { DefineComponent, ComponentOptionsMixin, VNodeProps, AllowedComponentProps, ComponentCustomProps, ExtractPropTypes } from '@vue/runtime-core';
+import { PropType } from 'vue';
+declare const _sfc_main: DefineComponent<{
+    editor: {
+        type: PropType<any>;
+        required: true;
+    };
+}, {
+    items: ({
+        icon: string;
+        title: string;
+        action: () => any;
+        isActive: () => any;
+        type?: undefined;
+    } | {
+        type: string;
+        icon?: undefined;
+        title?: undefined;
+        action?: undefined;
+        isActive?: undefined;
+    } | {
+        icon: string;
+        title: string;
+        action: () => any;
+        isActive?: undefined;
+        type?: undefined;
+    })[];
+}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, Record<string, any>, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<{
+    editor: {
+        type: PropType<any>;
+        required: true;
+    };
+}>>, {}>;
+export default _sfc_main;

package/dist/types/form/src/components/RichText/MenuItem.vue.d.ts

@@ -0,0 +1,41 @@
+import type { DefineComponent, ComponentOptionsMixin, VNodeProps, AllowedComponentProps, ComponentCustomProps, ExtractPropTypes } from '@vue/runtime-core';
+declare const _sfc_main: DefineComponent<{
+    icon: {
+        type: StringConstructor;
+        required: true;
+    };
+    title: {
+        type: StringConstructor;
+        required: true;
+    };
+    action: {
+        type: FunctionConstructor;
+        required: true;
+    };
+    isActive: {
+        type: FunctionConstructor;
+        default: null;
+    };
+}, {
+    remixiconUrl: string;
+}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, Record<string, any>, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<{
+    icon: {
+        type: StringConstructor;
+        required: true;
+    };
+    title: {
+        type: StringConstructor;
+        required: true;
+    };
+    action: {
+        type: FunctionConstructor;
+        required: true;
+    };
+    isActive: {
+        type: FunctionConstructor;
+        default: null;
+    };
+}>>, {
+    isActive: Function;
+}>;
+export default _sfc_main;

package/package.json

@@ -1,42 +1,51 @@
-{
-  "name": "starfish-form-custom",
-  "version": "1.0.32",
-  "main": "dist/starfish-form.mjs",
-  "style": "dist/style.css",
-  "module": "dist/starfish-form.mjs",
-  "types": "dist/types/starfish-form.d.ts",
-  "exports": {
-    ".": {
-      "import": "./dist/starfish-form.mjs"
-    },
-    "./dist/style.css": {
-      "import": "./dist/style.css"
-    },
-    "./*": "./*"
-  },
-  "scripts": {
-    "build": "vite build",
-    "prepublish": "npm version && npm run build"
-  },
-  "dependencies": {
-    "element-plus": "^2.2.12",
-    "jsoneditor": "^9.9.0",
-    "vue": "^3.2.25",
-    "@element-plus/icons-vue": "^2.0.8",
-    "wangeditor": "^4.7.15",
-    "vue-codemirror": "6.1.1",
-    "codemirror": "6.0.1",
-    "@codemirror/lang-javascript": "6.0.2"
-  },
-  "devDependencies": {
-    "@vitejs/plugin-vue": "^2.3.3",
-    "sass": "^1.35.1",
-    "typescript": "^4.5.4",
-    "rollup-plugin-visualizer": "^5.8.3",
-    "unplugin-auto-import": "^0.17.5",
-    "unplugin-vue-components": "^0.26.0",
-    "vite": "^4.5.2",
-    "vite-plugin-dts": "^1.2.0",
-    "vue-tsc": "^0.34.7"
-  }
-}
+{
+  "name": "starfish-form-custom",
+  "version": "1.0.33",
+  "main": "dist/starfish-form.mjs",
+  "style": "dist/style.css",
+  "module": "dist/starfish-form.mjs",
+  "types": "dist/types/starfish-form.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/starfish-form.mjs"
+    },
+    "./dist/style.css": {
+      "import": "./dist/style.css"
+    },
+    "./*": "./*"
+  },
+  "scripts": {
+    "build": "vite build",
+    "prepublish": "npm version && npm run build"
+  },
+  "dependencies": {
+    "@codemirror/lang-javascript": "6.0.2",
+    "@element-plus/icons-vue": "^2.0.8",
+    "@tiptap/extension-blockquote": "^3.10.7",
+    "@tiptap/extension-code": "^3.10.7",
+    "@tiptap/extension-code-block-lowlight": "^3.10.7",
+    "@tiptap/extension-horizontal-rule": "^3.10.7",
+    "@tiptap/extension-underline": "^3.10.7",
+    "@tiptap/pm": "^3.10.7",
+    "@tiptap/starter-kit": "^3.10.7",
+    "@tiptap/vue-3": "^3.10.7",
+    "codemirror": "6.0.1",
+    "element-plus": "^2.2.12",
+    "jsoneditor": "^9.9.0",
+    "lowlight": "^3.3.0",
+    "remixicon": "^4.7.0",
+    "vue": "^3.2.25",
+    "vue-codemirror": "6.1.1"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^2.3.3",
+    "rollup-plugin-visualizer": "^5.8.3",
+    "sass": "^1.35.1",
+    "typescript": "^4.5.4",
+    "unplugin-auto-import": "^0.17.5",
+    "unplugin-vue-components": "^0.26.0",
+    "vite": "^4.5.2",
+    "vite-plugin-dts": "^1.2.0",
+    "vue-tsc": "^0.34.7"
+  }
+}

package/src/components/RichText/MenuBar.vue

@@ -0,0 +1,145 @@
+<template>
+  <div class="editor__header">
+    <template v-for="(item, index) in items" :key="index">
+      <div v-if="item.type === 'divider'" class="divider" />
+      <MenuItem v-else :icon="item.icon" :title="item.title" :action="item.action" :is-active="item.isActive" />
+    </template>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from 'vue'
+import MenuItem from './MenuItem.vue'
+
+export default defineComponent({
+  name: 'MenuBar',
+  components: {
+    MenuItem
+  },
+  props: {
+    editor: {
+      type: Object as PropType<any>,
+      required: true
+    }
+  },
+  setup(props) {
+    const items = [
+      {
+        icon: 'bold',
+        title: 'Bold',
+        action: () => props.editor.chain().focus().toggleBold().run(),
+        isActive: () => props.editor.isActive('bold'),
+      },
+      {
+        icon: 'italic',
+        title: 'Italic',
+        action: () => props.editor.chain().focus().toggleItalic().run(),
+        isActive: () => props.editor.isActive('italic'),
+      },
+      {
+        icon: 'strikethrough',
+        title: 'Strike',
+        action: () => props.editor.chain().focus().toggleStrike().run(),
+        isActive: () => props.editor.isActive('strike'),
+      },
+      {
+        icon: 'code-view',
+        title: 'Code',
+        action: () => props.editor.chain().focus().toggleCode().run(),
+        isActive: () => props.editor.isActive('code'),
+      },
+      {
+        type: 'divider',
+      },
+      {
+        icon: 'h-1',
+        title: 'Heading 1',
+        action: () => props.editor.chain().focus().toggleHeading({ level: 1 }).run(),
+        isActive: () => props.editor.isActive('heading', { level: 1 }),
+      },
+      {
+        icon: 'h-2',
+        title: 'Heading 2',
+        action: () => props.editor.chain().focus().toggleHeading({ level: 2 }).run(),
+        isActive: () => props.editor.isActive('heading', { level: 2 }),
+      },
+      {
+        icon: 'paragraph',
+        title: 'Paragraph',
+        action: () => props.editor.chain().focus().setParagraph().run(),
+        isActive: () => props.editor.isActive('paragraph'),
+      },
+      {
+        icon: 'list-unordered',
+        title: 'Bullet list',
+        action: () => props.editor.chain().focus().toggleBulletList().run(),
+        isActive: () => props.editor.isActive('bulletList'),
+      },
+      {
+        icon: 'list-ordered',
+        title: 'Ordered list',
+        action: () => props.editor.chain().focus().toggleOrderedList().run(),
+        isActive: () => props.editor.isActive('orderedList'),
+      },
+      {
+        icon: 'code-box-line',
+        title: 'Code block',
+        action: () => props.editor.chain().focus().toggleCodeBlock().run(),
+        isActive: () => props.editor.isActive('codeBlock'),
+      },
+      {
+        type: 'divider',
+      },
+      {
+        icon: 'double-quotes-l',
+        title: 'Blockquote',
+        action: () => props.editor.chain().focus().toggleBlockquote().run(),
+        isActive: () => props.editor.isActive('blockquote'),
+      },
+      {
+        icon: 'separator',
+        title: 'Horizontal rule',
+        action: () => props.editor.chain().focus().setHorizontalRule().run(),
+      },
+      {
+        type: 'divider',
+      },
+      {
+        icon: 'arrow-go-back-line',
+        title: 'Undo',
+        action: () => props.editor.chain().focus().undo().run(),
+      },
+      {
+        icon: 'arrow-go-forward-line',
+        title: 'Redo',
+        action: () => props.editor.chain().focus().redo().run(),
+      },
+    ]
+
+    return {
+      items
+    }
+  }
+})
+</script>
+
+<style scoped>
+.editor__header {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 8px 12px;
+  border: 1px solid #DCDFE6;
+  border-bottom: none;
+  border-radius: 4px 4px 0 0;
+  background-color: #f8f9fa;
+  flex-wrap: wrap;
+}
+
+.divider {
+  width: 1px;
+  height: 20px;
+  background-color: #DCDFE6;
+  margin: 0 4px;
+}
+</style>

package/src/components/RichText/MenuItem.vue

@@ -0,0 +1,74 @@
+<template>
+  <button 
+    class="menu-item" 
+    :class="{ 'is-active': isActive && isActive() }" 
+    @click="action" 
+    :title="title"
+  >
+    <svg class="remix">
+      <use :xlink:href="`${remixiconUrl}#ri-${icon}`" />
+    </svg>
+  </button>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import remixiconUrl from 'remixicon/fonts/remixicon.symbol.svg'
+
+export default defineComponent({
+  name: 'MenuItem',
+  props: {
+    icon: {
+      type: String,
+      required: true
+    },
+    title: {
+      type: String,
+      required: true
+    },
+    action: {
+      type: Function,
+      required: true
+    },
+    isActive: {
+      type: Function,
+      default: null
+    }
+  },
+  setup() {
+    return {
+      remixiconUrl
+    }
+  }
+})
+</script>
+
+<style scoped>
+.menu-item {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  background: white;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.menu-item:hover {
+  background-color: #f0f0f0;
+  border-color: #999;
+}
+
+.menu-item.is-active {
+  background-color: #e0e0e0;
+  border-color: #666;
+}
+
+.remix {
+  width: 16px;
+  height: 16px;
+}
+</style>

package/src/components/RichText/index.vue

@@ -8,53 +8,113 @@
       </el-tooltip>
     </div>
     <div class="control" :style="{marginLeft: labelalign != 'top'?labelWidth + 'px': ''}">
-      <div ref="richText" v-if="drag" ></div>
-      <div ref="richText" v-if="!drag" ></div>
+      <div class="rich-text-editor">
+        <!-- 使用 MenuBar 组件 -->
+        <MenuBar v-if="editor && !readonly" :editor="editor" />
+        <editor-content :editor="editor" class="editor-content" />
+      </div>
     </div>
   </div>
 </template>
+
 <script lang="ts">
-  import { defineComponent, onMounted, ref, onUnmounted } from "vue";
-  import E from "wangeditor";
-  import { getFormConfig } from "../../utils/fieldConfig";
-  import fieldProps from "../../utils/fieldProps";
-  import { useWatch } from "../../utils/customHooks";
-  export default defineComponent({
-    ControlType: "RichText", // 必须与文件名匹配
-    nameCn: "富文本",
-    icon: "icon-textEdit",
-    formConfig: getFormConfig("RichText", [{ fieldName: "state", component: "Radio" }]),
-    props: {
-      ...fieldProps,
-    },
-    setup(props) {
-      const richText = ref();
-      let editor: any = null;
-      useWatch(props);
-      onMounted(() => {
-        if (props.drag) {
-          editor = new E(richText.value);
-          editor.config.focus = false;
-          editor.create();
-        } else {
-          editor = new E(richText.value);
-          editor.config.focus = false;
-          editor.create();
-          const data: any = props.data;
-          const item: any = props.item;
-          editor.config.onchange = function (newHtml: string) {
-            console.log("onblur", newHtml); // 获取最新的 html 内容
-            data[item.data.fieldName] = newHtml;
-          };
+import { defineComponent, onMounted, ref, onUnmounted, watch } from "vue";
+import { useEditor, EditorContent } from '@tiptap/vue-3'
+import StarterKit from '@tiptap/starter-kit'
+import Code from '@tiptap/extension-code'
+import Blockquote from '@tiptap/extension-blockquote'
+import HorizontalRule from '@tiptap/extension-horizontal-rule'
+import { getFormConfig } from "../../utils/fieldConfig";
+import fieldProps from "../../utils/fieldProps";
+import { useWatch } from "../../utils/customHooks";
+import MenuBar from "./MenuBar.vue"; // 导入 MenuBar 组件
+
+export default defineComponent({
+  ControlType: "RichText",
+  nameCn: "富文本",
+  icon: "icon-textEdit",
+  formConfig: getFormConfig("RichText", [{ fieldName: "state", component: "Radio" }]),
+  props: {
+    ...fieldProps,
+  },
+  components: {
+    EditorContent,
+    MenuBar
+  },
+  setup(props) {
+    const editor = useEditor({
+      content: props.data[props.item.data.fieldName] || props.item.data.defaultValue || '',
+      extensions: [
+        StarterKit,
+        Code,
+        Blockquote,
+        HorizontalRule,
+      ],
+      editable: !props.readonly,
+      editorProps: {
+        attributes: {
+          class: 'prose focus:outline-none max-w-none',
+          style: 'min-height: 200px; border: 1px solid #DCDFE6; border-radius: 4px; padding: 8px 12px;'
         }
-      });
-      onUnmounted(() => {
-        editor.destroy();
-        editor = null;
-      });
-      return {
-        richText
-      };
-    },
-  });
+      },
+      onUpdate: ({ editor }) => {
+        const html = editor.getHTML();
+        props.data[props.item.data.fieldName] = html;
+      },
+      onBlur: ({ editor }) => {
+        const html = editor.getHTML();
+        props.data[props.item.data.fieldName] = html;
+      }
+    });
+
+    useWatch(props);
+
+    // 监听数据变化
+    watch(() => props.item.data.defaultValue, (newVal) => {
+      if (editor.value && newVal) {
+        editor.value.commands.setContent(newVal, false);
+      }
+    });
+
+    // 监听只读状态变化
+    watch(() => props.readonly, (newVal) => {
+      if (editor.value) {
+        editor.value.setEditable(!newVal);
+      }
+    });
+
+    onUnmounted(() => {
+      if (editor.value) {
+        editor.value.destroy();
+      }
+    });
+
+    return {
+      editor
+    };
+  },
+});
 </script>
+
+<style scoped>
+.rich-text-editor {
+  min-height: 200px;
+}
+
+:deep(.editor-content) {
+  min-height: 200px;
+}
+
+:deep(.ProseMirror) {
+  min-height: 180px;
+  outline: none;
+}
+
+:deep(.ProseMirror p.is-editor-empty:first-child::before) {
+  color: #adb5bd;
+  content: attr(data-placeholder);
+  float: left;
+  height: 0;
+  pointer-events: none;
+}
+</style>