feat(fluent-editor): add mobile-first template (#1763)

examples/sites/demos/apis/fluent-editor.js

@@ -1,5 +1,5 @@
 export default {
-  mode: ['pc'],
+  mode: ['pc', 'mobile-first'],
   apis: [
     {
       name: 'fluent-editor',
@@ -13,7 +13,7 @@ export default {
             'zh-CN': '初始化的富文本数据格式是否为 Delta 格式，默认为 Delta 格式，设置成 false，则为 HTML 格式',
             'en-US': ''
           },
-          mode: ['pc'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'data-switch'
         },
         {
@@ -24,7 +24,7 @@ export default {
             'zh-CN': '富文本数据输出格式是否为 Delta 格式，默认为 Delta 格式，设置成 false，则为 HTML 格式',
             'en-US': ''
           },
-          mode: ['pc'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'data-switch'
         },
         {
@@ -35,7 +35,7 @@ export default {
             'zh-CN': '是否为不可编辑状态',
             'en-US': ''
           },
-          mode: ['pc'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'disabled'
         },
         {
@@ -46,7 +46,7 @@ export default {
             'zh-CN': '绑定值',
             'en-US': 'Bound Value'
           },
-          mode: ['pc'],
+          mode: ['pc', 'mobile-first'],
           pcDemo: 'basic-usage'
         }
       ],

examples/sites/demos/mobile-first/app/fluent-editor/basic-usage.vue

@@ -0,0 +1,22 @@
+<template>
+  <div>
+    <tiny-fluent-editor v-model="content"></tiny-fluent-editor>
+    内容：<br />
+    {{ content }}
+  </div>
+</template>
+
+<script>
+import TinyFluentEditor from '@opentiny/vue-fluent-editor'
+
+export default {
+  components: {
+    TinyFluentEditor
+  },
+  data() {
+    return {
+      content: '{"ops":[{"insert":"Hello "},{"attributes":{"bold":true},"insert":"FluentEditor"},{"insert":"!"}]}'
+    }
+  }
+}
+</script>

examples/sites/demos/mobile-first/app/fluent-editor/webdoc/fluent-editor.cn.md

@@ -0,0 +1,9 @@
+---
+title: FluentEditor 富文本
+---
+
+# FluentEditor 富文本
+
+<div>
+用于创建和编辑富文本内容。
+</div>

examples/sites/demos/mobile-first/app/fluent-editor/webdoc/fluent-editor.en.md

@@ -0,0 +1,9 @@
+---
+title: FluentEditor
+---
+
+# FluentEditor
+
+<div>
+FluentEditor is a rich text component used to create and edit rich text content.
+</div>

examples/sites/demos/mobile-first/app/fluent-editor/webdoc/fluent-editor.js

@@ -0,0 +1,18 @@
+export default {
+  column: '2',
+  owner: '',
+  demos: [
+    {
+      demoId: 'basic-usage',
+      name: {
+        'zh-CN': '基本用法',
+        'en-US': 'Basic Usage'
+      },
+      desc: {
+        'zh-CN': '通过 <code>v-model</code> 设置绑定值，默认数据保存格式为 Delta 数据格式。',
+        'en-US': 'You can refer to component label.'
+      },
+      codeFiles: ['basic-usage.vue']
+    }
+  ]
+}

examples/sites/demos/mobile-first/menus.js

@@ -55,6 +55,7 @@ export const cmpMenus = [
       { name: 'TimePickerMobile', nameCn: '时间选择器', key: 'time-picker-mobile' },
       { name: 'Button', nameCn: '按钮', key: 'button' },
       { name: 'Checkbox', nameCn: '复选框', key: 'checkbox' },
+      { name: 'FluentEditor', nameCn: '富文本', key: 'fluent-editor' },
       { name: 'Form', nameCn: '表单', key: 'form' },
       { name: 'Input', nameCn: '输入框', key: 'input' },
       { name: 'Numeric', nameCn: '计数器', key: 'numeric' },

packages/renderless/src/fluent-editor/index.ts

@@ -6,7 +6,7 @@ import { on, off } from '../common/deps/dom'
 import PopupManager from '../common/deps/popup-manager'
 
 export const init =
-  ({ api, emit, props, service, state, FluentEditor, UploaderDfls, defaultOptions, vm }) =>
+  ({ api, emit, props, service, state, FluentEditor, UploaderDfls, defaultOptions, vm, useBreakpoint, simpleToolbar }) =>
   () => {
     UploaderDfls.enableMultiUpload = { file: true, image: true }
     UploaderDfls.handler = api.uploaderDflsHandler
@@ -32,6 +32,11 @@ export const init =
 
     api.setToolbarTips()
 
+    const { current } = useBreakpoint()
+    if (current.value === 'default') {
+      state.innerOptions.modules.toolbar = simpleToolbar
+    }
+
     const quill = new FluentEditor(vm.$refs.editor, state.innerOptions)
     quill.emitter.on('file-change', api.fileOperationToSev)
     state.quill = Object.freeze(quill)

packages/renderless/src/fluent-editor/options.ts

@@ -243,3 +243,15 @@ export const iconOption = {
   undo: 'IconEditorUndo',
   video: 'IconEditorVideo'
 }
+
+export const simpleToolbar = [
+  'bold',
+  'italic',
+  'underline',
+  'strike',
+  { list: 'bullet' },
+  { list: 'ordered' },
+  { align: '' },
+  { align: 'center' },
+  { align: 'right' }
+]

packages/renderless/src/fluent-editor/vue.ts

@@ -37,7 +37,7 @@ import {
   removeHandleComposition,
   checkTableISEndElement
 } from './index'
-import { defaultOption, iconOption } from './options'
+import { defaultOption, iconOption, simpleToolbar } from './options'
 
 export const api = ['state', 'init', 'initContent', 'selectionChange', 'textChange', 'doPreview', 'handleDblclick']
 
@@ -117,11 +117,11 @@ const initApi = ({ api, state, service, emit, props, nextTick, FluentEditor, Upl
 }
 
 const mergeApi = (args) => {
-  let { api, state, service, emit, props, vm, i18n, watch, nextTick } = args
+  let { api, state, service, emit, props, vm, i18n, watch, nextTick, useBreakpoint } = args
   let { constants, FluentEditor, UploaderDfls, Delta, defaultOptions } = args
 
   Object.assign(api, {
-    init: init({ api, emit, props, service, state, FluentEditor, UploaderDfls, defaultOptions, vm }),
+    init: init({ api, emit, props, service, state, FluentEditor, UploaderDfls, defaultOptions, vm, useBreakpoint, simpleToolbar }),
     initContent: initContent({ state, props, api, nextTick }),
     fileHandler: fileHandler({ api, state }),
     imageHandler: imageHandler({ api, state }),
@@ -179,7 +179,7 @@ const initWatch = ({ watch, state, api, props, vm }) => {
 export const renderless = (
   props,
   { reactive, watch, onMounted, onBeforeUnmount, computed },
-  { service, emit, i18n, constants, nextTick, vm, t },
+  { service, emit, i18n, constants, nextTick, vm, t, useBreakpoint },
   { FluentEditor }
 ) => {
   const api = {}
@@ -190,7 +190,7 @@ export const renderless = (
 
   initApi({ api, state, service, emit, props, nextTick, FluentEditor, UploaderDfls, Delta, vm, t })
 
-  const args = { api, state, service, emit, props, vm, i18n, watch, nextTick }
+  const args = { api, state, service, emit, props, vm, i18n, watch, nextTick, useBreakpoint }
 
   Object.assign(args, { constants, FluentEditor, UploaderDfls, Delta, defaultOptions })
 

packages/vue/src/fluent-editor/index.ts

@@ -1,4 +1,4 @@
-import FluentEditor from './src/pc.vue'
+import FluentEditor from './src/index'
 import { version } from './package.json'
 
 FluentEditor.model = {

packages/vue/src/fluent-editor/src/index.ts

@@ -0,0 +1,77 @@
+/**
+ * Copyright (c) 2022 - present TinyVue Authors.
+ * Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
+ *
+ * Use of this source code is governed by an MIT-style license.
+ *
+ * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+ * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+ *
+ */
+import { $prefix, $props, $setup, defineComponent } from '@opentiny/vue-common'
+import template from 'virtual-template?pc|mobile-first'
+
+const $constants = {
+  PIC_PREVIEW_OPTIONS: {
+    zIndex: Number.POSITIVE_INFINITY,
+    urlList: null
+  },
+  EDITOR_FULLSCREEN_OPTIONS: Number.POSITIVE_INFINITY
+}
+
+export const fluentEditorProps = {
+  ...$props,
+  _constants: {
+    type: Object,
+    default: () => $constants
+  },
+  content: String,
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  fileUpload: Object,
+  globalOptions: {
+    type: Object,
+    required: false,
+    default: () => ({})
+  },
+  imageUpload: Object,
+  mentionObj: {
+    type: Object,
+    required: false,
+    default: () => ({})
+  },
+  modelValue: String,
+  options: {
+    type: Object,
+    required: false,
+    default: () => ({})
+  },
+  picPreview: [Object, Boolean],
+  dataType: {
+    type: Boolean,
+    default: true
+  },
+  dataUpgrade: {
+    type: Boolean,
+    default: true
+  },
+  zIndex: {
+    type: Number,
+    default: $constants.EDITOR_FULLSCREEN_OPTIONS
+  },
+  imagePasteFailCallback: {
+    type: Function,
+    default: () => {}
+  }
+}
+
+export default defineComponent({
+  name: $prefix + 'FluentEditor',
+  props: fluentEditorProps,
+  setup(props, context) {
+    return $setup({ props, context, template })
+  }
+})

packages/vue/src/fluent-editor/src/mobile-first.vue

@@ -0,0 +1,27 @@
+<template>
+  <div data-tag="tiny-fluent-editor">
+    <div ref="editor" id="editor"></div>
+  </div>
+</template>
+
+<script lang="ts">
+import { renderless, api } from '@opentiny/vue-renderless/fluent-editor/vue'
+import { props, $prefix, setup, defineComponent } from '@opentiny/vue-common'
+import FluentEditor from '@opentiny/fluent-editor'
+
+export default defineComponent({
+  name: $prefix + 'FluentEditor',
+  props: [...props, '_constants', 'disabled', 'modelValue', 'options', 'dataType', 'dataUpgrade'],
+  setup(props, context) {
+    return setup({
+      props,
+      context,
+      renderless,
+      api,
+      extendOptions: {
+        FluentEditor
+      }
+    })
+  }
+})
+</script>

packages/vue/src/fluent-editor/src/pc.vue

@@ -11,7 +11,7 @@
 </template>
 
 <script lang="ts">
-import { $prefix, setup, defineComponent } from '@opentiny/vue-common'
+import { $prefix, props, setup, defineComponent } from '@opentiny/vue-common'
 import { renderless, api } from '@opentiny/vue-renderless/fluent-editor/vue'
 import '@opentiny/fluent-editor/dist/style.css'
 import '@opentiny/vue-theme/fluent-editor/index.less'
@@ -51,14 +51,6 @@ import {
 } from '@opentiny/vue-icon'
 import ImageViewer from '@opentiny/vue-image-viewer'
 
-const $constants = {
-  PIC_PREVIEW_OPTIONS: {
-    zIndex: Number.POSITIVE_INFINITY,
-    urlList: null
-  },
-  EDITOR_FULLSCREEN_OPTIONS: Number.POSITIVE_INFINITY
-}
-
 export default defineComponent({
   name: $prefix + 'FluentEditor',
   components: {
@@ -96,59 +88,29 @@ export default defineComponent({
     IconFullscreen: IconFullscreen()
   },
   emits: ['ready', 'blur', 'focus', 'update:modelValue', 'change'],
-  props: {
-    _constants: {
-      type: Object,
-      default: () => $constants
-    },
-    content: String,
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    fileUpload: Object,
-    globalOptions: {
-      type: Object,
-      required: false,
-      default: () => ({})
-    },
-    imageUpload: Object,
-    mentionObj: {
-      type: Object,
-      required: false,
-      default: () => ({})
-    },
-    modelValue: String,
-    options: {
-      type: Object,
-      required: false,
-      default: () => ({})
-    },
-    picPreview: [Object, Boolean],
-    dataType: {
-      type: Boolean,
-      default: true
-    },
-    dataUpgrade: {
-      type: Boolean,
-      default: true
-    },
-    zIndex: {
-      type: Number,
-      default: $constants.EDITOR_FULLSCREEN_OPTIONS
-    },
-    imagePasteFailCallback: {
-      type: Function,
-      default: () => {}
-    }
-  },
+  props: [
+    ...props,
+    '_constants',
+    'content',
+    'disabled',
+    'fileUpload',
+    'globalOptions',
+    'imageUpload',
+    'mentionObj',
+    'modelValue',
+    'options',
+    'picPreview',
+    'dataType',
+    'dataUpgrade',
+    'zIndex',
+    'imagePasteFailCallback'
+  ],
   setup(props, context): any {
     return setup({
       props,
       context,
       renderless,
       api,
-      mono: true,
       extendOptions: {
         FluentEditor
       }