Expose rerender method to change init object

Author: jscasca

package.json

@@ -41,18 +41,19 @@
     "@ephox/bedrock-server": "^11.3.1",
     "@ephox/katamari": "^7.2.1",
     "@ephox/sugar": "^7.1.3",
-    "@storybook/addon-actions": "^6.4.0-alpha.9",
-    "@storybook/addon-essentials": "^6.4.0-alpha.9",
-    "@storybook/addon-links": "^6.4.0-alpha.9",
+    "@storybook/addon-actions": "^6.4.18",
+    "@storybook/addon-essentials": "^6.4.18",
+    "@storybook/addon-links": "^6.4.18",
     "@storybook/addon-notes": "^5.3.21",
     "@storybook/storybook-deployer": "^2.8.10",
-    "@storybook/vue3": "^6.4.0-alpha.9",
+    "@storybook/vue3": "^6.4.18",
     "@tinymce/beehive-flow": "^0.17.0",
     "@tinymce/eslint-plugin": "^1.9.1",
     "@tinymce/miniature": "^3.2.0",
     "@types/node": "^16.7.1",
-    "@vue/compiler-sfc": "^3.0.0",
-    "babel-loader": "^8.0.5",
+    "@vitejs/plugin-vue": "^2.1.0",
+    "@vue/compiler-sfc": "^3.2.29",
+    "babel-loader": "^8.2.3",
     "babel-preset-vue": "^2.0.2",
     "babel-register": "^6.26.0",
     "css-loader": "^6.2.0",
@@ -67,12 +68,13 @@
     "rollup-plugin-uglify": "^6.0.0",
     "tinymce-4": "npm:tinymce@^4",
     "tinymce-5": "npm:tinymce@^5",
-    "ts-loader": "^9.2.5",
+    "ts-loader": "^9.2.6",
     "ts-node": "^10.2.1",
-    "tsconfig-paths-webpack-plugin": "^3.5.1",
+    "tsconfig-paths-webpack-plugin": "^3.5.2",
     "typescript": "^4.3.5",
-    "vite": "^2.5.1",
-    "vue": "^3.0.0",
+    "vite": "^2.7.13",
+    "vue": "^3.2.5",
+    "vue-cli-plugin-storybook": "^2.1.0",
     "vue-loader": "^15.2.1",
     "vue-router": "^4.0.0-beta.13",
     "vue-template-compiler": "^2.6.14",

src/demo/Demo.vue

@@ -6,6 +6,8 @@
       <router-link :class="{ active: $route.path==='/inline'}" to="/inline">Inline Editor</router-link>
       <router-link :class="{ active: $route.path==='/controlled'}" to="/controlled">Controlled component</router-link>
       <router-link :class="{ active: $route.path==='/keepalive'}" to="/keepalive">Keep-alive</router-link>
+      <router-link :class="{ active: $route.path==='/refreshable'}" to="/refreshable">Rerender</router-link>
+      <router-link :class="{ active: $route.path==='/tagged'}" to="/tagged">Tag Change</router-link>
     </div>
     <router-view></router-view>
   </div>
@@ -15,5 +17,5 @@
 import { defineComponent } from "vue";
 export default defineComponent({
   name: 'Demo',
-})
+});
 </script>

src/demo/demo.ts

@@ -7,6 +7,8 @@ import Iframe from '/views/Iframe.vue';
 import Inline from '/views/Inline.vue';
 import Controlled from '/views/Controlled.vue';
 import Keepalive from '/views/KeepAlive.vue';
+import Refreshable from '/views/Refreshable.vue';
+import Tagged from '/views/Tagged.vue';
 
 const routes = [
   {
@@ -33,6 +35,16 @@ const routes = [
     path: '/keepalive',
     name: 'Keepalive',
     component: Keepalive
+  },
+  {
+    path: '/refreshable',
+    name: 'Refreshable',
+    component: Refreshable
+  },
+  {
+    path: '/tagged',
+    name: 'Tagged',
+    component: Tagged
   }
 ];
 

src/main/ts/components/Editor.ts

@@ -10,8 +10,8 @@ import { ScriptLoader } from '../ScriptLoader';
 import { getTinymce } from '../TinyMCE';
 import { isTextarea, mergePlugins, uuid, isNullOrUndefined, initEditor } from '../Utils';
 import { editorProps } from './EditorPropTypes';
-import { h, defineComponent, onMounted, ref, Ref, toRefs, watch, onBeforeUnmount, onActivated, onDeactivated } from 'vue';
-import { Editor as TinyMCEEditor, EditorEvent } from 'tinymce';
+import { h, defineComponent, onMounted, ref, Ref, toRefs, nextTick, watch, onBeforeUnmount, onActivated, onDeactivated } from 'vue';
+import { Editor as TinyMCEEditor, EditorEvent, RawEditorSettings } from 'tinymce';
 
 const renderInline = (ce: any, id: string, elementRef: Ref<Element | null>, tagName?: string) =>
   ce(tagName ? tagName : 'div', {
@@ -29,7 +29,8 @@ const renderIframe = (ce: any, id: string, elementRef: Ref<Element | null>) =>
 export const Editor = defineComponent({
   props: editorProps,
   setup: (props, ctx) => {
-    const { disabled, modelValue } = toRefs(props);
+    let conf = props.init ? {...props.init} : {};
+    const { disabled, modelValue, tagName } = toRefs(props);
     const element: Ref<Element | null> = ref(null);
     let vueEditor: any = null;
     const elementId: string = props.id || uuid('tiny-vue');
@@ -46,17 +47,17 @@ export const Editor = defineComponent({
     const initWrapper = (): void => {
       const content = getContent(mounting);
       const finalInit = {
-        ...props.init,
+        ...conf,
         readonly: props.disabled,
         selector: `#${elementId}`,
-        plugins: mergePlugins(props.init && props.init.plugins, props.plugins),
-        toolbar: props.toolbar || (props.init && props.init.toolbar),
+        plugins: mergePlugins(conf.plugins, props.plugins),
+        toolbar: props.toolbar || (conf.toolbar),
         inline: inlineEditor,
         setup: (editor: TinyMCEEditor) => {
           vueEditor = editor;
           editor.on('init', (e: EditorEvent<any>) => initEditor(e, props, ctx, editor, modelValue, content));
-          if (props.init && typeof props.init.setup === 'function') {
-            props.init.setup(editor);
+          if (typeof conf.setup === 'function') {
+            conf.setup(editor);
           }
         }
       };
@@ -71,6 +72,13 @@ export const Editor = defineComponent({
         vueEditor.setMode(disable ? 'readonly' : 'design');
       }
     });
+    watch(tagName, (tagName) => {
+      if (!modelBind) {
+        cache = vueEditor.getContent();
+      }
+      getTinymce()?.remove(vueEditor);
+      nextTick(() => initWrapper());
+    });
     onMounted(() => {
       if (getTinymce() !== null) {
         initWrapper();
@@ -105,6 +113,15 @@ export const Editor = defineComponent({
         getTinymce()?.remove(vueEditor);
       });
     }
+    const rerender = (init: RawEditorSettings) => {
+      cache = vueEditor.getContent();
+      getTinymce()?.remove(vueEditor);
+      conf = {...conf, ...init};
+      nextTick(() => initWrapper());
+    };
+    ctx.expose({
+      rerender
+    });
     return () => inlineEditor ?
       renderInline(h, elementId, element, props.tagName) :
       renderIframe(h, elementId, element);

vite.config.js

@@ -1,9 +1,18 @@
-const path = require('path');
+import vue from '@vitejs/plugin-vue';
+import path from 'path';
 
-module.exports = {
+export default {
   root: 'src/demo',
-  alias: {
-    '/@/': path.resolve(__dirname, 'src'),
+  plugins: [vue()],
+  resolve: {
+    alias: [
+      {
+        find: '/@',
+        replacement: path.resolve(__dirname, './src')
+      }
+    ]
   },
-  port: 3001
+  server: {
+    port: 3001
+  }
 };