🚀 Socket Launch Week Day 4:Socket MCP Adds Org Alerts, Threat Feed Review, and Package Inspection.Learn more →
Sign In

vue-trix

Package Overview
Dependencies
Maintainers
1
Versions
52
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

vue-trix - npm Package Compare versions

Comparing version
1.1.7
 to
1.1.9
+2
-3
dist/vue-trix.esm.js

@@ -191,3 +191,2 @@ import Vue from 'vue';

},
created: function created () {},
mounted: function mounted () {

@@ -272,3 +271,3 @@ var this$1 = this;

this.$refs.trix.toolbarElement.style['pointer-events'] = 'none';
this.$refs.trix.style['pointer-events'] = 'none';
this.$refs.trix.contentEditable = false;
this.$refs.trix.style['background'] = '#e9ecef';

@@ -492,3 +491,3 @@ } else {

if (!inject) { return }
inject("data-v-7774f39b_0", { source: "\n.src-components-trix_container-5Bcy {\n max-width: 100%;\n height: auto;\n}\n.src-components-trix_container-5Bcy .src-components-trix-button-group-2D-J {\n background-color: white;\n}\n.src-components-trix_container-5Bcy .src-components-trix-content-1TD_ {\n background-color: white;\n}\n", map: {"version":3,"sources":["/Users/hanhdt/Workspace/side-projects/vuejs/vue-trix/src/components/VueTrix.vue"],"names":[],"mappings":";AAmPA;EACA,eAAA;EACA,YAAA;AACA;AACA;EACA,uBAAA;AACA;AACA;EACA,uBAAA;AACA","file":"VueTrix.vue","sourcesContent":["<template>\n <div :class=\"[$style.trix_container]\">\n <trix-editor\n :contenteditable=\"!disabledEditor\"\n :class=\"['trix-content']\"\n ref=\"trix\"\n :input=\"computedId\"\n :placeholder=\"placeholder\"\n @trix-change=\"handleContentChange\"\n @trix-file-accept=\"emitFileAccept\"\n @trix-attachment-add=\"emitAttachmentAdd\"\n @trix-attachment-remove=\"emitAttachmentRemove\"\n @trix-selection-change=\"emitSelectionChange\"\n @trix-initialize=\"emitInitialize\"\n @trix-before-initialize=\"emitBeforeInitialize\"\n @trix-focus=\"processTrixFocus\"\n @trix-blur=\"processTrixBlur\"\n />\n <input\n type=\"hidden\"\n :name=\"inputName\"\n :id=\"computedId\"\n :value=\"editorContent\"\n />\n </div>\n</template>\n\n<script>\nimport 'trix'\nimport 'trix/dist/trix.css'\nimport EmitFileAccept from '../mixins/EmitFileAccept.js'\nimport EmitInitialize from '../mixins/EmitInitialize.js'\nimport EmitAttachmentAdd from '../mixins/EmitAttachmentAdd.js'\nimport EmitSelectionChange from '../mixins/EmitSelectionChange.js'\nimport EmitAttachmentRemove from '../mixins/EmitAttachmentRemove.js'\nimport EmitBeforeInitialize from '../mixins/EmitBeforeInitialize.js'\nimport ProcessEditorFocusAndBlur from '../mixins/ProcessEditorFocusAndBlur.js'\n\nexport default {\n name: 'vue-trix',\n mixins: [\n EmitFileAccept(),\n EmitInitialize(),\n EmitAttachmentAdd(),\n EmitSelectionChange(),\n EmitAttachmentRemove(),\n EmitBeforeInitialize(),\n ProcessEditorFocusAndBlur()\n ],\n model: {\n prop: 'srcContent',\n event: 'update'\n },\n props: {\n /**\n * This prop will put the editor in read-only mode\n */\n disabledEditor: {\n type: Boolean,\n required: false,\n default () {\n return false\n }\n },\n /**\n * This is referenced `id` of the hidden input field defined.\n * It is optional and will be a random string by default.\n */\n inputId: {\n type: String,\n required: false,\n default () {\n return ''\n }\n },\n /**\n * This is referenced `name` of the hidden input field defined,\n * default value is `content`.\n */\n inputName: {\n type: String,\n required: false,\n default () {\n return 'content'\n }\n },\n /**\n * The placeholder attribute specifies a short hint\n * that describes the expected value of a editor.\n */\n placeholder: {\n type: String,\n required: false,\n default () {\n return ''\n }\n },\n /**\n * The source content is associcated to v-model directive.\n */\n srcContent: {\n type: String,\n required: false,\n default () {\n return ''\n }\n },\n /**\n * The boolean attribute allows saving editor state into browser's localStorage\n * (optional, default is `false`).\n */\n localStorage: {\n type: Boolean,\n required: false,\n default () {\n return false\n }\n }\n },\n created () {},\n mounted () {\n /** Check if editor read-only mode is required */\n this.decorateDisabledEditor(this.disabledEditor)\n this.$nextTick(() => {\n /**\n * If localStorage is enabled,\n * then load editor's content from the beginning.\n */\n if (this.localStorage) {\n const savedValue = localStorage.getItem(this.storageId('VueTrix'))\n if (savedValue && !this.srcContent) {\n this.$refs.trix.editor.loadJSON(JSON.parse(savedValue))\n }\n }\n })\n },\n data () {\n return {\n editorContent: this.srcContent,\n isActived: null\n }\n },\n methods: {\n handleContentChange (event) {\n this.editorContent = event.srcElement ? event.srcElement.value : event.target.value\n this.$emit('input', this.editorContent)\n },\n handleInitialContentChange (newContent, oldContent) {\n newContent = newContent === undefined ? '' : newContent\n\n if (this.$refs.trix.editor && this.$refs.trix.editor.innerHTML !== newContent) {\n /* Update editor's content when initial content changed */\n this.editorContent = newContent\n\n /**\n * If user are typing, then don't reload the editor,\n * hence keep cursor's position after typing.\n */\n if (!this.isActived) {\n this.reloadEditorContent(this.editorContent)\n }\n }\n },\n emitEditorState (value) {\n /**\n * If localStorage is enabled,\n * then save editor's content into storage\n */\n if (this.localStorage) {\n localStorage.setItem(\n this.storageId('VueTrix'),\n JSON.stringify(this.$refs.trix.editor)\n )\n }\n this.$emit('update', this.editorContent)\n },\n storageId (component) {\n if (this.inputId) {\n return `${component}.${this.inputId}.content`\n } else {\n return `${component}.content`\n }\n },\n reloadEditorContent (newContent) {\n // Reload HTML content\n this.$refs.trix.editor.loadHTML(newContent)\n\n // Move cursor to end of new content updated\n this.$refs.trix.editor.setSelectedRange(this.getContentEndPosition())\n },\n getContentEndPosition () {\n return this.$refs.trix.editor.getDocument().toString().length - 1\n },\n decorateDisabledEditor (editorState) {\n /** Disable toolbar and editor by pointer events styling */\n if (editorState) {\n this.$refs.trix.toolbarElement.style['pointer-events'] = 'none'\n this.$refs.trix.style['pointer-events'] = 'none'\n this.$refs.trix.style['background'] = '#e9ecef'\n } else {\n this.$refs.trix.toolbarElement.style['pointer-events'] = 'unset'\n this.$refs.trix.style['pointer-events'] = 'unset'\n this.$refs.trix.style['background'] = 'transparent'\n }\n }\n },\n computed: {\n /**\n * Compute a random id of hidden input\n * when it haven't been specified.\n */\n generateId () {\n return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c => {\n var r = Math.random() * 16 | 0\n var v = c === 'x' ? r : (r & 0x3 | 0x8)\n return v.toString(16)\n })\n },\n computedId () {\n return this.inputId || this.generateId\n },\n initialContent () {\n return this.srcContent\n },\n isDisabled () {\n return this.disabledEditor\n }\n },\n watch: {\n editorContent: {\n handler: 'emitEditorState'\n },\n initialContent: {\n handler: 'handleInitialContentChange'\n },\n isDisabled: {\n handler: 'decorateDisabledEditor'\n }\n }\n}\n</script>\n\n<style lang=\"css\" module>\n.trix_container {\n max-width: 100%;\n height: auto;\n}\n.trix_container .trix-button-group {\n background-color: white;\n}\n.trix_container .trix-content {\n background-color: white;\n}\n</style>\n"]}, media: undefined });
inject("data-v-22ca123f_0", { source: "\n.src-components-trix_container-5Bcy {\n max-width: 100%;\n height: auto;\n}\n.src-components-trix_container-5Bcy .src-components-trix-button-group-2D-J {\n background-color: white;\n}\n.src-components-trix_container-5Bcy .src-components-trix-content-1TD_ {\n background-color: white;\n}\n", map: {"version":3,"sources":["/home/hanh/side-projects/vue-trix/src/components/VueTrix.vue"],"names":[],"mappings":";AAkPA;EACA,eAAA;EACA,YAAA;AACA;AACA;EACA,uBAAA;AACA;AACA;EACA,uBAAA;AACA","file":"VueTrix.vue","sourcesContent":["<template>\n <div :class=\"[$style.trix_container]\">\n <trix-editor\n :contenteditable=\"!disabledEditor\"\n :class=\"['trix-content']\"\n ref=\"trix\"\n :input=\"computedId\"\n :placeholder=\"placeholder\"\n @trix-change=\"handleContentChange\"\n @trix-file-accept=\"emitFileAccept\"\n @trix-attachment-add=\"emitAttachmentAdd\"\n @trix-attachment-remove=\"emitAttachmentRemove\"\n @trix-selection-change=\"emitSelectionChange\"\n @trix-initialize=\"emitInitialize\"\n @trix-before-initialize=\"emitBeforeInitialize\"\n @trix-focus=\"processTrixFocus\"\n @trix-blur=\"processTrixBlur\"\n />\n <input\n type=\"hidden\"\n :name=\"inputName\"\n :id=\"computedId\"\n :value=\"editorContent\"\n />\n </div>\n</template>\n\n<script>\nimport 'trix'\nimport 'trix/dist/trix.css'\nimport EmitFileAccept from '../mixins/EmitFileAccept.js'\nimport EmitInitialize from '../mixins/EmitInitialize.js'\nimport EmitAttachmentAdd from '../mixins/EmitAttachmentAdd.js'\nimport EmitSelectionChange from '../mixins/EmitSelectionChange.js'\nimport EmitAttachmentRemove from '../mixins/EmitAttachmentRemove.js'\nimport EmitBeforeInitialize from '../mixins/EmitBeforeInitialize.js'\nimport ProcessEditorFocusAndBlur from '../mixins/ProcessEditorFocusAndBlur.js'\n\nexport default {\n name: 'vue-trix',\n mixins: [\n EmitFileAccept(),\n EmitInitialize(),\n EmitAttachmentAdd(),\n EmitSelectionChange(),\n EmitAttachmentRemove(),\n EmitBeforeInitialize(),\n ProcessEditorFocusAndBlur()\n ],\n model: {\n prop: 'srcContent',\n event: 'update'\n },\n props: {\n /**\n * This prop will put the editor in read-only mode\n */\n disabledEditor: {\n type: Boolean,\n required: false,\n default () {\n return false\n }\n },\n /**\n * This is referenced `id` of the hidden input field defined.\n * It is optional and will be a random string by default.\n */\n inputId: {\n type: String,\n required: false,\n default () {\n return ''\n }\n },\n /**\n * This is referenced `name` of the hidden input field defined,\n * default value is `content`.\n */\n inputName: {\n type: String,\n required: false,\n default () {\n return 'content'\n }\n },\n /**\n * The placeholder attribute specifies a short hint\n * that describes the expected value of a editor.\n */\n placeholder: {\n type: String,\n required: false,\n default () {\n return ''\n }\n },\n /**\n * The source content is associcated to v-model directive.\n */\n srcContent: {\n type: String,\n required: false,\n default () {\n return ''\n }\n },\n /**\n * The boolean attribute allows saving editor state into browser's localStorage\n * (optional, default is `false`).\n */\n localStorage: {\n type: Boolean,\n required: false,\n default () {\n return false\n }\n }\n },\n mounted () {\n /** Check if editor read-only mode is required */\n this.decorateDisabledEditor(this.disabledEditor)\n this.$nextTick(() => {\n /**\n * If localStorage is enabled,\n * then load editor's content from the beginning.\n */\n if (this.localStorage) {\n const savedValue = localStorage.getItem(this.storageId('VueTrix'))\n if (savedValue && !this.srcContent) {\n this.$refs.trix.editor.loadJSON(JSON.parse(savedValue))\n }\n }\n })\n },\n data () {\n return {\n editorContent: this.srcContent,\n isActived: null\n }\n },\n methods: {\n handleContentChange (event) {\n this.editorContent = event.srcElement ? event.srcElement.value : event.target.value\n this.$emit('input', this.editorContent)\n },\n handleInitialContentChange (newContent, oldContent) {\n newContent = newContent === undefined ? '' : newContent\n\n if (this.$refs.trix.editor && this.$refs.trix.editor.innerHTML !== newContent) {\n /* Update editor's content when initial content changed */\n this.editorContent = newContent\n\n /**\n * If user are typing, then don't reload the editor,\n * hence keep cursor's position after typing.\n */\n if (!this.isActived) {\n this.reloadEditorContent(this.editorContent)\n }\n }\n },\n emitEditorState (value) {\n /**\n * If localStorage is enabled,\n * then save editor's content into storage\n */\n if (this.localStorage) {\n localStorage.setItem(\n this.storageId('VueTrix'),\n JSON.stringify(this.$refs.trix.editor)\n )\n }\n this.$emit('update', this.editorContent)\n },\n storageId (component) {\n if (this.inputId) {\n return `${component}.${this.inputId}.content`\n } else {\n return `${component}.content`\n }\n },\n reloadEditorContent (newContent) {\n // Reload HTML content\n this.$refs.trix.editor.loadHTML(newContent)\n\n // Move cursor to end of new content updated\n this.$refs.trix.editor.setSelectedRange(this.getContentEndPosition())\n },\n getContentEndPosition () {\n return this.$refs.trix.editor.getDocument().toString().length - 1\n },\n decorateDisabledEditor (editorState) {\n /** Disable toolbar and editor by pointer events styling */\n if (editorState) {\n this.$refs.trix.toolbarElement.style['pointer-events'] = 'none'\n this.$refs.trix.contentEditable = false\n this.$refs.trix.style['background'] = '#e9ecef'\n } else {\n this.$refs.trix.toolbarElement.style['pointer-events'] = 'unset'\n this.$refs.trix.style['pointer-events'] = 'unset'\n this.$refs.trix.style['background'] = 'transparent'\n }\n }\n },\n computed: {\n /**\n * Compute a random id of hidden input\n * when it haven't been specified.\n */\n generateId () {\n return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c => {\n var r = Math.random() * 16 | 0\n var v = c === 'x' ? r : (r & 0x3 | 0x8)\n return v.toString(16)\n })\n },\n computedId () {\n return this.inputId || this.generateId\n },\n initialContent () {\n return this.srcContent\n },\n isDisabled () {\n return this.disabledEditor\n }\n },\n watch: {\n editorContent: {\n handler: 'emitEditorState'\n },\n initialContent: {\n handler: 'handleInitialContentChange'\n },\n isDisabled: {\n handler: 'decorateDisabledEditor'\n }\n }\n}\n</script>\n\n<style lang=\"css\" module>\n.trix_container {\n max-width: 100%;\n height: auto;\n}\n.trix_container .trix-button-group {\n background-color: white;\n}\n.trix_container .trix-content {\n background-color: white;\n}\n</style>\n"]}, media: undefined });
Object.defineProperty(this, "$style", { value: {"trix_container":"src-components-trix_container-5Bcy","trix-button-group":"src-components-trix-button-group-2D-J","trix-content":"src-components-trix-content-1TD_"} });

@@ -495,0 +494,0 @@ 

+1
-1
dist/vue-trix.esm.js.map

@@ -1,1 +0,1 @@

{"version":3,"file":"vue-trix.esm.js","sources":["../src/mixins/EmitFileAccept.js","../src/mixins/EmitInitialize.js","../src/mixins/EmitAttachmentAdd.js","../src/mixins/EmitSelectionChange.js","../src/mixins/EmitAttachmentRemove.js","../src/mixins/EmitBeforeInitialize.js","../src/mixins/ProcessEditorFocusAndBlur.js","../src/components/VueTrix.vue","../node_modules/vue-runtime-helpers/dist/normalize-component.mjs","../node_modules/vue-runtime-helpers/dist/inject-style/browser.mjs","../src/index.js"],"sourcesContent":["/**\n *\n * @param {*} component\n */\nexport default function (component) {\n return {\n methods: {\n emitFileAccept (file) {\n this.$emit('trix-file-accept', file)\n }\n }\n }\n}\n","/**\n *\n * @param {*} component\n */\nexport default function (component) {\n return {\n methods: {\n emitInitialize (editor) {\n this.$emit('trix-initialize', this.$refs.trix.editor, event)\n }\n }\n }\n}\n","/**\n *\n * @param {*} component\n */\nexport default function (component) {\n return {\n methods: {\n emitAttachmentAdd (file) {\n this.$emit('trix-attachment-add', file)\n }\n }\n }\n}\n","/**\n *\n * @param {*} component\n */\nexport default function (component) {\n return {\n methods: {\n emitSelectionChange (event) {\n this.$emit('trix-selection-change', this.$refs.trix.editor, event)\n }\n }\n }\n}\n","/**\n *\n * @param {*} component\n */\nexport default function (component) {\n return {\n methods: {\n emitAttachmentRemove (file) {\n this.$emit('trix-attachment-remove', file)\n }\n }\n }\n}\n","/**\n *\n * @param {*} component\n */\nexport default function (component) {\n return {\n methods: {\n emitBeforeInitialize (event) {\n this.$emit('trix-before-initialize', this.$refs.trix.editor, event)\n }\n }\n }\n}\n","export default function (component) {\n return {\n methods: {\n processTrixFocus (event) {\n if (this.$refs.trix) {\n this.isActived = true\n this.$emit('trix-focus', this.$refs.trix.editor, event)\n }\n },\n processTrixBlur (event) {\n if (this.$refs.trix) {\n this.isActived = false\n this.$emit('trix-blur', this.$refs.trix.editor, event)\n }\n }\n }\n }\n}\n","<template>\n <div :class=\"[$style.trix_container]\">\n <trix-editor\n :contenteditable=\"!disabledEditor\"\n :class=\"['trix-content']\"\n ref=\"trix\"\n :input=\"computedId\"\n :placeholder=\"placeholder\"\n @trix-change=\"handleContentChange\"\n @trix-file-accept=\"emitFileAccept\"\n @trix-attachment-add=\"emitAttachmentAdd\"\n @trix-attachment-remove=\"emitAttachmentRemove\"\n @trix-selection-change=\"emitSelectionChange\"\n @trix-initialize=\"emitInitialize\"\n @trix-before-initialize=\"emitBeforeInitialize\"\n @trix-focus=\"processTrixFocus\"\n @trix-blur=\"processTrixBlur\"\n />\n <input\n type=\"hidden\"\n :name=\"inputName\"\n :id=\"computedId\"\n :value=\"editorContent\"\n />\n </div>\n</template>\n\n<script>\nimport 'trix'\nimport 'trix/dist/trix.css'\nimport EmitFileAccept from '../mixins/EmitFileAccept.js'\nimport EmitInitialize from '../mixins/EmitInitialize.js'\nimport EmitAttachmentAdd from '../mixins/EmitAttachmentAdd.js'\nimport EmitSelectionChange from '../mixins/EmitSelectionChange.js'\nimport EmitAttachmentRemove from '../mixins/EmitAttachmentRemove.js'\nimport EmitBeforeInitialize from '../mixins/EmitBeforeInitialize.js'\nimport ProcessEditorFocusAndBlur from '../mixins/ProcessEditorFocusAndBlur.js'\n\nexport default {\n name: 'vue-trix',\n mixins: [\n EmitFileAccept(),\n EmitInitialize(),\n EmitAttachmentAdd(),\n EmitSelectionChange(),\n EmitAttachmentRemove(),\n EmitBeforeInitialize(),\n ProcessEditorFocusAndBlur()\n ],\n model: {\n prop: 'srcContent',\n event: 'update'\n },\n props: {\n /**\n * This prop will put the editor in read-only mode\n */\n disabledEditor: {\n type: Boolean,\n required: false,\n default () {\n return false\n }\n },\n /**\n * This is referenced `id` of the hidden input field defined.\n * It is optional and will be a random string by default.\n */\n inputId: {\n type: String,\n required: false,\n default () {\n return ''\n }\n },\n /**\n * This is referenced `name` of the hidden input field defined,\n * default value is `content`.\n */\n inputName: {\n type: String,\n required: false,\n default () {\n return 'content'\n }\n },\n /**\n * The placeholder attribute specifies a short hint\n * that describes the expected value of a editor.\n */\n placeholder: {\n type: String,\n required: false,\n default () {\n return ''\n }\n },\n /**\n * The source content is associcated to v-model directive.\n */\n srcContent: {\n type: String,\n required: false,\n default () {\n return ''\n }\n },\n /**\n * The boolean attribute allows saving editor state into browser's localStorage\n * (optional, default is `false`).\n */\n localStorage: {\n type: Boolean,\n required: false,\n default () {\n return false\n }\n }\n },\n created () {},\n mounted () {\n /** Check if editor read-only mode is required */\n this.decorateDisabledEditor(this.disabledEditor)\n this.$nextTick(() => {\n /**\n * If localStorage is enabled,\n * then load editor's content from the beginning.\n */\n if (this.localStorage) {\n const savedValue = localStorage.getItem(this.storageId('VueTrix'))\n if (savedValue && !this.srcContent) {\n this.$refs.trix.editor.loadJSON(JSON.parse(savedValue))\n }\n }\n })\n },\n data () {\n return {\n editorContent: this.srcContent,\n isActived: null\n }\n },\n methods: {\n handleContentChange (event) {\n this.editorContent = event.srcElement ? event.srcElement.value : event.target.value\n this.$emit('input', this.editorContent)\n },\n handleInitialContentChange (newContent, oldContent) {\n newContent = newContent === undefined ? '' : newContent\n\n if (this.$refs.trix.editor && this.$refs.trix.editor.innerHTML !== newContent) {\n /* Update editor's content when initial content changed */\n this.editorContent = newContent\n\n /**\n * If user are typing, then don't reload the editor,\n * hence keep cursor's position after typing.\n */\n if (!this.isActived) {\n this.reloadEditorContent(this.editorContent)\n }\n }\n },\n emitEditorState (value) {\n /**\n * If localStorage is enabled,\n * then save editor's content into storage\n */\n if (this.localStorage) {\n localStorage.setItem(\n this.storageId('VueTrix'),\n JSON.stringify(this.$refs.trix.editor)\n )\n }\n this.$emit('update', this.editorContent)\n },\n storageId (component) {\n if (this.inputId) {\n return `${component}.${this.inputId}.content`\n } else {\n return `${component}.content`\n }\n },\n reloadEditorContent (newContent) {\n // Reload HTML content\n this.$refs.trix.editor.loadHTML(newContent)\n\n // Move cursor to end of new content updated\n this.$refs.trix.editor.setSelectedRange(this.getContentEndPosition())\n },\n getContentEndPosition () {\n return this.$refs.trix.editor.getDocument().toString().length - 1\n },\n decorateDisabledEditor (editorState) {\n /** Disable toolbar and editor by pointer events styling */\n if (editorState) {\n this.$refs.trix.toolbarElement.style['pointer-events'] = 'none'\n this.$refs.trix.style['pointer-events'] = 'none'\n this.$refs.trix.style['background'] = '#e9ecef'\n } else {\n this.$refs.trix.toolbarElement.style['pointer-events'] = 'unset'\n this.$refs.trix.style['pointer-events'] = 'unset'\n this.$refs.trix.style['background'] = 'transparent'\n }\n }\n },\n computed: {\n /**\n * Compute a random id of hidden input\n * when it haven't been specified.\n */\n generateId () {\n return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c => {\n var r = Math.random() * 16 | 0\n var v = c === 'x' ? r : (r & 0x3 | 0x8)\n return v.toString(16)\n })\n },\n computedId () {\n return this.inputId || this.generateId\n },\n initialContent () {\n return this.srcContent\n },\n isDisabled () {\n return this.disabledEditor\n }\n },\n watch: {\n editorContent: {\n handler: 'emitEditorState'\n },\n initialContent: {\n handler: 'handleInitialContentChange'\n },\n isDisabled: {\n handler: 'decorateDisabledEditor'\n }\n }\n}\n</script>\n\n<style lang=\"css\" module>\n.trix_container {\n max-width: 100%;\n height: auto;\n}\n.trix_container .trix-button-group {\n background-color: white;\n}\n.trix_container .trix-content {\n background-color: white;\n}\n</style>\n","function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier /* server only */, shadowMode, createInjector, createInjectorSSR, createInjectorShadow) {\r\n if (typeof shadowMode !== 'boolean') {\r\n createInjectorSSR = createInjector;\r\n createInjector = shadowMode;\r\n shadowMode = false;\r\n }\r\n // Vue.extend constructor export interop.\r\n const options = typeof script === 'function' ? script.options : script;\r\n // render functions\r\n if (template && template.render) {\r\n options.render = template.render;\r\n options.staticRenderFns = template.staticRenderFns;\r\n options._compiled = true;\r\n // functional template\r\n if (isFunctionalTemplate) {\r\n options.functional = true;\r\n }\r\n }\r\n // scopedId\r\n if (scopeId) {\r\n options._scopeId = scopeId;\r\n }\r\n let hook;\r\n if (moduleIdentifier) {\r\n // server build\r\n hook = function (context) {\r\n // 2.3 injection\r\n context =\r\n context || // cached call\r\n (this.$vnode && this.$vnode.ssrContext) || // stateful\r\n (this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext); // functional\r\n // 2.2 with runInNewContext: true\r\n if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {\r\n context = __VUE_SSR_CONTEXT__;\r\n }\r\n // inject component styles\r\n if (style) {\r\n style.call(this, createInjectorSSR(context));\r\n }\r\n // register component module identifier for async chunk inference\r\n if (context && context._registeredComponents) {\r\n context._registeredComponents.add(moduleIdentifier);\r\n }\r\n };\r\n // used by ssr in case component is cached and beforeCreate\r\n // never gets called\r\n options._ssrRegister = hook;\r\n }\r\n else if (style) {\r\n hook = shadowMode\r\n ? function (context) {\r\n style.call(this, createInjectorShadow(context, this.$root.$options.shadowRoot));\r\n }\r\n : function (context) {\r\n style.call(this, createInjector(context));\r\n };\r\n }\r\n if (hook) {\r\n if (options.functional) {\r\n // register for functional component in vue file\r\n const originalRender = options.render;\r\n options.render = function renderWithStyleInjection(h, context) {\r\n hook.call(context);\r\n return originalRender(h, context);\r\n };\r\n }\r\n else {\r\n // inject component registration as beforeCreate hook\r\n const existing = options.beforeCreate;\r\n options.beforeCreate = existing ? [].concat(existing, hook) : [hook];\r\n }\r\n }\r\n return script;\r\n}\n\nexport default normalizeComponent;\n//# sourceMappingURL=normalize-component.mjs.map\n","const isOldIE = typeof navigator !== 'undefined' &&\r\n /msie [6-9]\\\\b/.test(navigator.userAgent.toLowerCase());\r\nfunction createInjector(context) {\r\n return (id, style) => addStyle(id, style);\r\n}\r\nlet HEAD;\r\nconst styles = {};\r\nfunction addStyle(id, css) {\r\n const group = isOldIE ? css.media || 'default' : id;\r\n const style = styles[group] || (styles[group] = { ids: new Set(), styles: [] });\r\n if (!style.ids.has(id)) {\r\n style.ids.add(id);\r\n let code = css.source;\r\n if (css.map) {\r\n // https://developer.chrome.com/devtools/docs/javascript-debugging\r\n // this makes source maps inside style tags work properly in Chrome\r\n code += '\\n/*# sourceURL=' + css.map.sources[0] + ' */';\r\n // http://stackoverflow.com/a/26603875\r\n code +=\r\n '\\n/*# sourceMappingURL=data:application/json;base64,' +\r\n btoa(unescape(encodeURIComponent(JSON.stringify(css.map)))) +\r\n ' */';\r\n }\r\n if (!style.element) {\r\n style.element = document.createElement('style');\r\n style.element.type = 'text/css';\r\n if (css.media)\r\n style.element.setAttribute('media', css.media);\r\n if (HEAD === undefined) {\r\n HEAD = document.head || document.getElementsByTagName('head')[0];\r\n }\r\n HEAD.appendChild(style.element);\r\n }\r\n if ('styleSheet' in style.element) {\r\n style.styles.push(code);\r\n style.element.styleSheet.cssText = style.styles\r\n .filter(Boolean)\r\n .join('\\n');\r\n }\r\n else {\r\n const index = style.ids.size - 1;\r\n const textNode = document.createTextNode(code);\r\n const nodes = style.element.childNodes;\r\n if (nodes[index])\r\n style.element.removeChild(nodes[index]);\r\n if (nodes.length)\r\n style.element.insertBefore(textNode, nodes[index]);\r\n else\r\n style.element.appendChild(textNode);\r\n }\r\n }\r\n}\n\nexport default createInjector;\n//# sourceMappingURL=browser.mjs.map\n","/*\n * Vue-Trix index.js\n * Author: tranduchanh.ms@gmail.com\n * Github: https://github.com/hanhdt/vue-trix\n */\n\nimport Vue from 'vue'\nimport VueTrix from './components/VueTrix.vue'\nVue.config.ignoredElements = ['trix-editor']\n\nVue.component(VueTrix.name, VueTrix)\n\nexport default VueTrix\n"],"names":["const","let","VueTrix"],"mappings":"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"}
{"version":3,"file":"vue-trix.esm.js","sources":["../src/mixins/EmitFileAccept.js","../src/mixins/EmitInitialize.js","../src/mixins/EmitAttachmentAdd.js","../src/mixins/EmitSelectionChange.js","../src/mixins/EmitAttachmentRemove.js","../src/mixins/EmitBeforeInitialize.js","../src/mixins/ProcessEditorFocusAndBlur.js","../src/components/VueTrix.vue","../node_modules/vue-runtime-helpers/dist/normalize-component.mjs","../node_modules/vue-runtime-helpers/dist/inject-style/browser.mjs","../src/index.js"],"sourcesContent":["/**\n *\n * @param {*} component\n */\nexport default function (component) {\n return {\n methods: {\n emitFileAccept (file) {\n this.$emit('trix-file-accept', file)\n }\n }\n }\n}\n","/**\n *\n * @param {*} component\n */\nexport default function (component) {\n return {\n methods: {\n emitInitialize (editor) {\n this.$emit('trix-initialize', this.$refs.trix.editor, event)\n }\n }\n }\n}\n","/**\n *\n * @param {*} component\n */\nexport default function (component) {\n return {\n methods: {\n emitAttachmentAdd (file) {\n this.$emit('trix-attachment-add', file)\n }\n }\n }\n}\n","/**\n *\n * @param {*} component\n */\nexport default function (component) {\n return {\n methods: {\n emitSelectionChange (event) {\n this.$emit('trix-selection-change', this.$refs.trix.editor, event)\n }\n }\n }\n}\n","/**\n *\n * @param {*} component\n */\nexport default function (component) {\n return {\n methods: {\n emitAttachmentRemove (file) {\n this.$emit('trix-attachment-remove', file)\n }\n }\n }\n}\n","/**\n *\n * @param {*} component\n */\nexport default function (component) {\n return {\n methods: {\n emitBeforeInitialize (event) {\n this.$emit('trix-before-initialize', this.$refs.trix.editor, event)\n }\n }\n }\n}\n","export default function (component) {\n return {\n methods: {\n processTrixFocus (event) {\n if (this.$refs.trix) {\n this.isActived = true\n this.$emit('trix-focus', this.$refs.trix.editor, event)\n }\n },\n processTrixBlur (event) {\n if (this.$refs.trix) {\n this.isActived = false\n this.$emit('trix-blur', this.$refs.trix.editor, event)\n }\n }\n }\n }\n}\n","<template>\n <div :class=\"[$style.trix_container]\">\n <trix-editor\n :contenteditable=\"!disabledEditor\"\n :class=\"['trix-content']\"\n ref=\"trix\"\n :input=\"computedId\"\n :placeholder=\"placeholder\"\n @trix-change=\"handleContentChange\"\n @trix-file-accept=\"emitFileAccept\"\n @trix-attachment-add=\"emitAttachmentAdd\"\n @trix-attachment-remove=\"emitAttachmentRemove\"\n @trix-selection-change=\"emitSelectionChange\"\n @trix-initialize=\"emitInitialize\"\n @trix-before-initialize=\"emitBeforeInitialize\"\n @trix-focus=\"processTrixFocus\"\n @trix-blur=\"processTrixBlur\"\n />\n <input\n type=\"hidden\"\n :name=\"inputName\"\n :id=\"computedId\"\n :value=\"editorContent\"\n />\n </div>\n</template>\n\n<script>\nimport 'trix'\nimport 'trix/dist/trix.css'\nimport EmitFileAccept from '../mixins/EmitFileAccept.js'\nimport EmitInitialize from '../mixins/EmitInitialize.js'\nimport EmitAttachmentAdd from '../mixins/EmitAttachmentAdd.js'\nimport EmitSelectionChange from '../mixins/EmitSelectionChange.js'\nimport EmitAttachmentRemove from '../mixins/EmitAttachmentRemove.js'\nimport EmitBeforeInitialize from '../mixins/EmitBeforeInitialize.js'\nimport ProcessEditorFocusAndBlur from '../mixins/ProcessEditorFocusAndBlur.js'\n\nexport default {\n name: 'vue-trix',\n mixins: [\n EmitFileAccept(),\n EmitInitialize(),\n EmitAttachmentAdd(),\n EmitSelectionChange(),\n EmitAttachmentRemove(),\n EmitBeforeInitialize(),\n ProcessEditorFocusAndBlur()\n ],\n model: {\n prop: 'srcContent',\n event: 'update'\n },\n props: {\n /**\n * This prop will put the editor in read-only mode\n */\n disabledEditor: {\n type: Boolean,\n required: false,\n default () {\n return false\n }\n },\n /**\n * This is referenced `id` of the hidden input field defined.\n * It is optional and will be a random string by default.\n */\n inputId: {\n type: String,\n required: false,\n default () {\n return ''\n }\n },\n /**\n * This is referenced `name` of the hidden input field defined,\n * default value is `content`.\n */\n inputName: {\n type: String,\n required: false,\n default () {\n return 'content'\n }\n },\n /**\n * The placeholder attribute specifies a short hint\n * that describes the expected value of a editor.\n */\n placeholder: {\n type: String,\n required: false,\n default () {\n return ''\n }\n },\n /**\n * The source content is associcated to v-model directive.\n */\n srcContent: {\n type: String,\n required: false,\n default () {\n return ''\n }\n },\n /**\n * The boolean attribute allows saving editor state into browser's localStorage\n * (optional, default is `false`).\n */\n localStorage: {\n type: Boolean,\n required: false,\n default () {\n return false\n }\n }\n },\n mounted () {\n /** Check if editor read-only mode is required */\n this.decorateDisabledEditor(this.disabledEditor)\n this.$nextTick(() => {\n /**\n * If localStorage is enabled,\n * then load editor's content from the beginning.\n */\n if (this.localStorage) {\n const savedValue = localStorage.getItem(this.storageId('VueTrix'))\n if (savedValue && !this.srcContent) {\n this.$refs.trix.editor.loadJSON(JSON.parse(savedValue))\n }\n }\n })\n },\n data () {\n return {\n editorContent: this.srcContent,\n isActived: null\n }\n },\n methods: {\n handleContentChange (event) {\n this.editorContent = event.srcElement ? event.srcElement.value : event.target.value\n this.$emit('input', this.editorContent)\n },\n handleInitialContentChange (newContent, oldContent) {\n newContent = newContent === undefined ? '' : newContent\n\n if (this.$refs.trix.editor && this.$refs.trix.editor.innerHTML !== newContent) {\n /* Update editor's content when initial content changed */\n this.editorContent = newContent\n\n /**\n * If user are typing, then don't reload the editor,\n * hence keep cursor's position after typing.\n */\n if (!this.isActived) {\n this.reloadEditorContent(this.editorContent)\n }\n }\n },\n emitEditorState (value) {\n /**\n * If localStorage is enabled,\n * then save editor's content into storage\n */\n if (this.localStorage) {\n localStorage.setItem(\n this.storageId('VueTrix'),\n JSON.stringify(this.$refs.trix.editor)\n )\n }\n this.$emit('update', this.editorContent)\n },\n storageId (component) {\n if (this.inputId) {\n return `${component}.${this.inputId}.content`\n } else {\n return `${component}.content`\n }\n },\n reloadEditorContent (newContent) {\n // Reload HTML content\n this.$refs.trix.editor.loadHTML(newContent)\n\n // Move cursor to end of new content updated\n this.$refs.trix.editor.setSelectedRange(this.getContentEndPosition())\n },\n getContentEndPosition () {\n return this.$refs.trix.editor.getDocument().toString().length - 1\n },\n decorateDisabledEditor (editorState) {\n /** Disable toolbar and editor by pointer events styling */\n if (editorState) {\n this.$refs.trix.toolbarElement.style['pointer-events'] = 'none'\n this.$refs.trix.contentEditable = false\n this.$refs.trix.style['background'] = '#e9ecef'\n } else {\n this.$refs.trix.toolbarElement.style['pointer-events'] = 'unset'\n this.$refs.trix.style['pointer-events'] = 'unset'\n this.$refs.trix.style['background'] = 'transparent'\n }\n }\n },\n computed: {\n /**\n * Compute a random id of hidden input\n * when it haven't been specified.\n */\n generateId () {\n return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c => {\n var r = Math.random() * 16 | 0\n var v = c === 'x' ? r : (r & 0x3 | 0x8)\n return v.toString(16)\n })\n },\n computedId () {\n return this.inputId || this.generateId\n },\n initialContent () {\n return this.srcContent\n },\n isDisabled () {\n return this.disabledEditor\n }\n },\n watch: {\n editorContent: {\n handler: 'emitEditorState'\n },\n initialContent: {\n handler: 'handleInitialContentChange'\n },\n isDisabled: {\n handler: 'decorateDisabledEditor'\n }\n }\n}\n</script>\n\n<style lang=\"css\" module>\n.trix_container {\n max-width: 100%;\n height: auto;\n}\n.trix_container .trix-button-group {\n background-color: white;\n}\n.trix_container .trix-content {\n background-color: white;\n}\n</style>\n","function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier /* server only */, shadowMode, createInjector, createInjectorSSR, createInjectorShadow) {\r\n if (typeof shadowMode !== 'boolean') {\r\n createInjectorSSR = createInjector;\r\n createInjector = shadowMode;\r\n shadowMode = false;\r\n }\r\n // Vue.extend constructor export interop.\r\n const options = typeof script === 'function' ? script.options : script;\r\n // render functions\r\n if (template && template.render) {\r\n options.render = template.render;\r\n options.staticRenderFns = template.staticRenderFns;\r\n options._compiled = true;\r\n // functional template\r\n if (isFunctionalTemplate) {\r\n options.functional = true;\r\n }\r\n }\r\n // scopedId\r\n if (scopeId) {\r\n options._scopeId = scopeId;\r\n }\r\n let hook;\r\n if (moduleIdentifier) {\r\n // server build\r\n hook = function (context) {\r\n // 2.3 injection\r\n context =\r\n context || // cached call\r\n (this.$vnode && this.$vnode.ssrContext) || // stateful\r\n (this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext); // functional\r\n // 2.2 with runInNewContext: true\r\n if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {\r\n context = __VUE_SSR_CONTEXT__;\r\n }\r\n // inject component styles\r\n if (style) {\r\n style.call(this, createInjectorSSR(context));\r\n }\r\n // register component module identifier for async chunk inference\r\n if (context && context._registeredComponents) {\r\n context._registeredComponents.add(moduleIdentifier);\r\n }\r\n };\r\n // used by ssr in case component is cached and beforeCreate\r\n // never gets called\r\n options._ssrRegister = hook;\r\n }\r\n else if (style) {\r\n hook = shadowMode\r\n ? function (context) {\r\n style.call(this, createInjectorShadow(context, this.$root.$options.shadowRoot));\r\n }\r\n : function (context) {\r\n style.call(this, createInjector(context));\r\n };\r\n }\r\n if (hook) {\r\n if (options.functional) {\r\n // register for functional component in vue file\r\n const originalRender = options.render;\r\n options.render = function renderWithStyleInjection(h, context) {\r\n hook.call(context);\r\n return originalRender(h, context);\r\n };\r\n }\r\n else {\r\n // inject component registration as beforeCreate hook\r\n const existing = options.beforeCreate;\r\n options.beforeCreate = existing ? [].concat(existing, hook) : [hook];\r\n }\r\n }\r\n return script;\r\n}\n\nexport default normalizeComponent;\n//# sourceMappingURL=normalize-component.mjs.map\n","const isOldIE = typeof navigator !== 'undefined' &&\r\n /msie [6-9]\\\\b/.test(navigator.userAgent.toLowerCase());\r\nfunction createInjector(context) {\r\n return (id, style) => addStyle(id, style);\r\n}\r\nlet HEAD;\r\nconst styles = {};\r\nfunction addStyle(id, css) {\r\n const group = isOldIE ? css.media || 'default' : id;\r\n const style = styles[group] || (styles[group] = { ids: new Set(), styles: [] });\r\n if (!style.ids.has(id)) {\r\n style.ids.add(id);\r\n let code = css.source;\r\n if (css.map) {\r\n // https://developer.chrome.com/devtools/docs/javascript-debugging\r\n // this makes source maps inside style tags work properly in Chrome\r\n code += '\\n/*# sourceURL=' + css.map.sources[0] + ' */';\r\n // http://stackoverflow.com/a/26603875\r\n code +=\r\n '\\n/*# sourceMappingURL=data:application/json;base64,' +\r\n btoa(unescape(encodeURIComponent(JSON.stringify(css.map)))) +\r\n ' */';\r\n }\r\n if (!style.element) {\r\n style.element = document.createElement('style');\r\n style.element.type = 'text/css';\r\n if (css.media)\r\n style.element.setAttribute('media', css.media);\r\n if (HEAD === undefined) {\r\n HEAD = document.head || document.getElementsByTagName('head')[0];\r\n }\r\n HEAD.appendChild(style.element);\r\n }\r\n if ('styleSheet' in style.element) {\r\n style.styles.push(code);\r\n style.element.styleSheet.cssText = style.styles\r\n .filter(Boolean)\r\n .join('\\n');\r\n }\r\n else {\r\n const index = style.ids.size - 1;\r\n const textNode = document.createTextNode(code);\r\n const nodes = style.element.childNodes;\r\n if (nodes[index])\r\n style.element.removeChild(nodes[index]);\r\n if (nodes.length)\r\n style.element.insertBefore(textNode, nodes[index]);\r\n else\r\n style.element.appendChild(textNode);\r\n }\r\n }\r\n}\n\nexport default createInjector;\n//# sourceMappingURL=browser.mjs.map\n","/*\n * Vue-Trix index.js\n * Author: tranduchanh.ms@gmail.com\n * Github: https://github.com/hanhdt/vue-trix\n */\n\nimport Vue from 'vue'\nimport VueTrix from './components/VueTrix.vue'\nVue.config.ignoredElements = ['trix-editor']\n\nVue.component(VueTrix.name, VueTrix)\n\nexport default VueTrix\n"],"names":["const","let","VueTrix"],"mappings":"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"}
+1
-1
dist/vue-trix.min.js

@@ -1,2 +0,2 @@

var VueTrix=function(t){"use strict";t=t&&t.hasOwnProperty("default")?t.default:t;var e={name:"vue-trix",mixins:[{methods:{emitFileAccept:function(t){this.$emit("trix-file-accept",t)}}},{methods:{emitInitialize:function(){this.$emit("trix-initialize",this.$refs.trix.editor,event)}}},{methods:{emitAttachmentAdd:function(t){this.$emit("trix-attachment-add",t)}}},{methods:{emitSelectionChange:function(t){this.$emit("trix-selection-change",this.$refs.trix.editor,t)}}},{methods:{emitAttachmentRemove:function(t){this.$emit("trix-attachment-remove",t)}}},{methods:{emitBeforeInitialize:function(t){this.$emit("trix-before-initialize",this.$refs.trix.editor,t)}}},{methods:{processTrixFocus:function(t){this.$refs.trix&&(this.isActived=!0,this.$emit("trix-focus",this.$refs.trix.editor,t))},processTrixBlur:function(t){this.$refs.trix&&(this.isActived=!1,this.$emit("trix-blur",this.$refs.trix.editor,t))}}}],model:{prop:"srcContent",event:"update"},props:{disabledEditor:{type:Boolean,required:!1,default:function(){return!1}},inputId:{type:String,required:!1,default:function(){return""}},inputName:{type:String,required:!1,default:function(){return"content"}},placeholder:{type:String,required:!1,default:function(){return""}},srcContent:{type:String,required:!1,default:function(){return""}},localStorage:{type:Boolean,required:!1,default:function(){return!1}}},created:function(){},mounted:function(){var e=this;this.decorateDisabledEditor(this.disabledEditor),this.$nextTick(function(){if(e.localStorage){var t=localStorage.getItem(e.storageId("VueTrix"));t&&!e.srcContent&&e.$refs.trix.editor.loadJSON(JSON.parse(t))}})},data:function(){return{editorContent:this.srcContent,isActived:null}},methods:{handleContentChange:function(t){this.editorContent=t.srcElement?t.srcElement.value:t.target.value,this.$emit("input",this.editorContent)},handleInitialContentChange:function(t){t=void 0===t?"":t,this.$refs.trix.editor&&this.$refs.trix.editor.innerHTML!==t&&(this.editorContent=t,this.isActived||this.reloadEditorContent(this.editorContent))},emitEditorState:function(){this.localStorage&&localStorage.setItem(this.storageId("VueTrix"),JSON.stringify(this.$refs.trix.editor)),this.$emit("update",this.editorContent)},storageId:function(t){return this.inputId?t+"."+this.inputId+".content":t+".content"},reloadEditorContent:function(t){this.$refs.trix.editor.loadHTML(t),this.$refs.trix.editor.setSelectedRange(this.getContentEndPosition())},getContentEndPosition:function(){return this.$refs.trix.editor.getDocument().toString().length-1},decorateDisabledEditor:function(t){t?(this.$refs.trix.toolbarElement.style["pointer-events"]="none",this.$refs.trix.style["pointer-events"]="none",this.$refs.trix.style.background="#e9ecef"):(this.$refs.trix.toolbarElement.style["pointer-events"]="unset",this.$refs.trix.style["pointer-events"]="unset",this.$refs.trix.style.background="transparent")}},computed:{generateId:function(){return"xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g,function(t){var e=16*Math.random()|0;return("x"===t?e:3&e|8).toString(16)})},computedId:function(){return this.inputId||this.generateId},initialContent:function(){return this.srcContent},isDisabled:function(){return this.disabledEditor}},watch:{editorContent:{handler:"emitEditorState"},initialContent:{handler:"handleInitialContentChange"},isDisabled:{handler:"decorateDisabledEditor"}}};var d,c="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());var l={};function n(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{class:[t.$style.trix_container]},[n("trix-editor",{ref:"trix",class:["trix-content"],attrs:{contenteditable:!t.disabledEditor,input:t.computedId,placeholder:t.placeholder},on:{"trix-change":t.handleContentChange,"trix-file-accept":t.emitFileAccept,"trix-attachment-add":t.emitAttachmentAdd,"trix-attachment-remove":t.emitAttachmentRemove,"trix-selection-change":t.emitSelectionChange,"trix-initialize":t.emitInitialize,"trix-before-initialize":t.emitBeforeInitialize,"trix-focus":t.processTrixFocus,"trix-blur":t.processTrixBlur}}),t._v(" "),n("input",{attrs:{type:"hidden",name:t.inputName,id:t.computedId},domProps:{value:t.editorContent}})],1)}var i=e;n._withStripped=!0;var r=function(t,e,n,i,r,o,s,a,d,c){"boolean"!=typeof s&&(d=a,a=s,s=!1);var l,u="function"==typeof n?n.options:n;if(t&&t.render&&(u.render=t.render,u.staticRenderFns=t.staticRenderFns,u._compiled=!0,r&&(u.functional=!0)),i&&(u._scopeId=i),o?(l=function(t){(t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),e&&e.call(this,d(t)),t&&t._registeredComponents&&t._registeredComponents.add(o)},u._ssrRegister=l):e&&(l=s?function(t){e.call(this,c(t,this.$root.$options.shadowRoot))}:function(t){e.call(this,a(t))}),l)if(u.functional){var h=u.render;u.render=function(t,e){return l.call(e),h(t,e)}}else{var m=u.beforeCreate;u.beforeCreate=m?[].concat(m,l):[l]}return n}({render:n,staticRenderFns:[]},function(t){t&&(t("data-v-7774f39b_0",{source:"\n.src-components-trix_container-5Bcy {\n max-width: 100%;\n height: auto;\n}\n.src-components-trix_container-5Bcy .src-components-trix-button-group-2D-J {\n background-color: white;\n}\n.src-components-trix_container-5Bcy .src-components-trix-content-1TD_ {\n background-color: white;\n}\n",map:{version:3,sources:["/Users/hanhdt/Workspace/side-projects/vuejs/vue-trix/src/components/VueTrix.vue"],names:[],mappings:";AAmPA;EACA,eAAA;EACA,YAAA;AACA;AACA;EACA,uBAAA;AACA;AACA;EACA,uBAAA;AACA",file:"VueTrix.vue",sourcesContent:["<template>\n <div :class=\"[$style.trix_container]\">\n <trix-editor\n :contenteditable=\"!disabledEditor\"\n :class=\"['trix-content']\"\n ref=\"trix\"\n :input=\"computedId\"\n :placeholder=\"placeholder\"\n @trix-change=\"handleContentChange\"\n @trix-file-accept=\"emitFileAccept\"\n @trix-attachment-add=\"emitAttachmentAdd\"\n @trix-attachment-remove=\"emitAttachmentRemove\"\n @trix-selection-change=\"emitSelectionChange\"\n @trix-initialize=\"emitInitialize\"\n @trix-before-initialize=\"emitBeforeInitialize\"\n @trix-focus=\"processTrixFocus\"\n @trix-blur=\"processTrixBlur\"\n />\n <input\n type=\"hidden\"\n :name=\"inputName\"\n :id=\"computedId\"\n :value=\"editorContent\"\n />\n </div>\n</template>\n\n<script>\nimport 'trix'\nimport 'trix/dist/trix.css'\nimport EmitFileAccept from '../mixins/EmitFileAccept.js'\nimport EmitInitialize from '../mixins/EmitInitialize.js'\nimport EmitAttachmentAdd from '../mixins/EmitAttachmentAdd.js'\nimport EmitSelectionChange from '../mixins/EmitSelectionChange.js'\nimport EmitAttachmentRemove from '../mixins/EmitAttachmentRemove.js'\nimport EmitBeforeInitialize from '../mixins/EmitBeforeInitialize.js'\nimport ProcessEditorFocusAndBlur from '../mixins/ProcessEditorFocusAndBlur.js'\n\nexport default {\n name: 'vue-trix',\n mixins: [\n EmitFileAccept(),\n EmitInitialize(),\n EmitAttachmentAdd(),\n EmitSelectionChange(),\n EmitAttachmentRemove(),\n EmitBeforeInitialize(),\n ProcessEditorFocusAndBlur()\n ],\n model: {\n prop: 'srcContent',\n event: 'update'\n },\n props: {\n /**\n * This prop will put the editor in read-only mode\n */\n disabledEditor: {\n type: Boolean,\n required: false,\n default () {\n return false\n }\n },\n /**\n * This is referenced `id` of the hidden input field defined.\n * It is optional and will be a random string by default.\n */\n inputId: {\n type: String,\n required: false,\n default () {\n return ''\n }\n },\n /**\n * This is referenced `name` of the hidden input field defined,\n * default value is `content`.\n */\n inputName: {\n type: String,\n required: false,\n default () {\n return 'content'\n }\n },\n /**\n * The placeholder attribute specifies a short hint\n * that describes the expected value of a editor.\n */\n placeholder: {\n type: String,\n required: false,\n default () {\n return ''\n }\n },\n /**\n * The source content is associcated to v-model directive.\n */\n srcContent: {\n type: String,\n required: false,\n default () {\n return ''\n }\n },\n /**\n * The boolean attribute allows saving editor state into browser's localStorage\n * (optional, default is `false`).\n */\n localStorage: {\n type: Boolean,\n required: false,\n default () {\n return false\n }\n }\n },\n created () {},\n mounted () {\n /** Check if editor read-only mode is required */\n this.decorateDisabledEditor(this.disabledEditor)\n this.$nextTick(() => {\n /**\n * If localStorage is enabled,\n * then load editor's content from the beginning.\n */\n if (this.localStorage) {\n const savedValue = localStorage.getItem(this.storageId('VueTrix'))\n if (savedValue && !this.srcContent) {\n this.$refs.trix.editor.loadJSON(JSON.parse(savedValue))\n }\n }\n })\n },\n data () {\n return {\n editorContent: this.srcContent,\n isActived: null\n }\n },\n methods: {\n handleContentChange (event) {\n this.editorContent = event.srcElement ? event.srcElement.value : event.target.value\n this.$emit('input', this.editorContent)\n },\n handleInitialContentChange (newContent, oldContent) {\n newContent = newContent === undefined ? '' : newContent\n\n if (this.$refs.trix.editor && this.$refs.trix.editor.innerHTML !== newContent) {\n /* Update editor's content when initial content changed */\n this.editorContent = newContent\n\n /**\n * If user are typing, then don't reload the editor,\n * hence keep cursor's position after typing.\n */\n if (!this.isActived) {\n this.reloadEditorContent(this.editorContent)\n }\n }\n },\n emitEditorState (value) {\n /**\n * If localStorage is enabled,\n * then save editor's content into storage\n */\n if (this.localStorage) {\n localStorage.setItem(\n this.storageId('VueTrix'),\n JSON.stringify(this.$refs.trix.editor)\n )\n }\n this.$emit('update', this.editorContent)\n },\n storageId (component) {\n if (this.inputId) {\n return `${component}.${this.inputId}.content`\n } else {\n return `${component}.content`\n }\n },\n reloadEditorContent (newContent) {\n // Reload HTML content\n this.$refs.trix.editor.loadHTML(newContent)\n\n // Move cursor to end of new content updated\n this.$refs.trix.editor.setSelectedRange(this.getContentEndPosition())\n },\n getContentEndPosition () {\n return this.$refs.trix.editor.getDocument().toString().length - 1\n },\n decorateDisabledEditor (editorState) {\n /** Disable toolbar and editor by pointer events styling */\n if (editorState) {\n this.$refs.trix.toolbarElement.style['pointer-events'] = 'none'\n this.$refs.trix.style['pointer-events'] = 'none'\n this.$refs.trix.style['background'] = '#e9ecef'\n } else {\n this.$refs.trix.toolbarElement.style['pointer-events'] = 'unset'\n this.$refs.trix.style['pointer-events'] = 'unset'\n this.$refs.trix.style['background'] = 'transparent'\n }\n }\n },\n computed: {\n /**\n * Compute a random id of hidden input\n * when it haven't been specified.\n */\n generateId () {\n return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c => {\n var r = Math.random() * 16 | 0\n var v = c === 'x' ? r : (r & 0x3 | 0x8)\n return v.toString(16)\n })\n },\n computedId () {\n return this.inputId || this.generateId\n },\n initialContent () {\n return this.srcContent\n },\n isDisabled () {\n return this.disabledEditor\n }\n },\n watch: {\n editorContent: {\n handler: 'emitEditorState'\n },\n initialContent: {\n handler: 'handleInitialContentChange'\n },\n isDisabled: {\n handler: 'decorateDisabledEditor'\n }\n }\n}\n<\/script>\n\n<style lang=\"css\" module>\n.trix_container {\n max-width: 100%;\n height: auto;\n}\n.trix_container .trix-button-group {\n background-color: white;\n}\n.trix_container .trix-content {\n background-color: white;\n}\n</style>\n"]},media:void 0}),Object.defineProperty(this,"$style",{value:{trix_container:"src-components-trix_container-5Bcy","trix-button-group":"src-components-trix-button-group-2D-J","trix-content":"src-components-trix-content-1TD_"}}))},i,void 0,!1,void 0,!1,function(t){return function(t,e){return function(t,e){var n=c?e.media||"default":t,i=l[n]||(l[n]={ids:new Set,styles:[]});if(!i.ids.has(t)){i.ids.add(t);var r=e.source;if(e.map&&(r+="\n/*# sourceURL="+e.map.sources[0]+" */",r+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(e.map))))+" */"),i.element||(i.element=document.createElement("style"),i.element.type="text/css",e.media&&i.element.setAttribute("media",e.media),void 0===d&&(d=document.head||document.getElementsByTagName("head")[0]),d.appendChild(i.element)),"styleSheet"in i.element)i.styles.push(r),i.element.styleSheet.cssText=i.styles.filter(Boolean).join("\n");else{var o=i.ids.size-1,s=document.createTextNode(r),a=i.element.childNodes;a[o]&&i.element.removeChild(a[o]),a.length?i.element.insertBefore(s,a[o]):i.element.appendChild(s)}}}(t,e)}},void 0,void 0);return t.config.ignoredElements=["trix-editor"],t.component(r.name,r),r}(Vue);
var VueTrix=function(t){"use strict";t=t&&Object.prototype.hasOwnProperty.call(t,"default")?t.default:t;var e={name:"vue-trix",mixins:[{methods:{emitFileAccept:function(t){this.$emit("trix-file-accept",t)}}},{methods:{emitInitialize:function(){this.$emit("trix-initialize",this.$refs.trix.editor,event)}}},{methods:{emitAttachmentAdd:function(t){this.$emit("trix-attachment-add",t)}}},{methods:{emitSelectionChange:function(t){this.$emit("trix-selection-change",this.$refs.trix.editor,t)}}},{methods:{emitAttachmentRemove:function(t){this.$emit("trix-attachment-remove",t)}}},{methods:{emitBeforeInitialize:function(t){this.$emit("trix-before-initialize",this.$refs.trix.editor,t)}}},{methods:{processTrixFocus:function(t){this.$refs.trix&&(this.isActived=!0,this.$emit("trix-focus",this.$refs.trix.editor,t))},processTrixBlur:function(t){this.$refs.trix&&(this.isActived=!1,this.$emit("trix-blur",this.$refs.trix.editor,t))}}}],model:{prop:"srcContent",event:"update"},props:{disabledEditor:{type:Boolean,required:!1,default:function(){return!1}},inputId:{type:String,required:!1,default:function(){return""}},inputName:{type:String,required:!1,default:function(){return"content"}},placeholder:{type:String,required:!1,default:function(){return""}},srcContent:{type:String,required:!1,default:function(){return""}},localStorage:{type:Boolean,required:!1,default:function(){return!1}}},mounted:function(){var e=this;this.decorateDisabledEditor(this.disabledEditor),this.$nextTick(function(){if(e.localStorage){var t=localStorage.getItem(e.storageId("VueTrix"));t&&!e.srcContent&&e.$refs.trix.editor.loadJSON(JSON.parse(t))}})},data:function(){return{editorContent:this.srcContent,isActived:null}},methods:{handleContentChange:function(t){this.editorContent=t.srcElement?t.srcElement.value:t.target.value,this.$emit("input",this.editorContent)},handleInitialContentChange:function(t){t=void 0===t?"":t,this.$refs.trix.editor&&this.$refs.trix.editor.innerHTML!==t&&(this.editorContent=t,this.isActived||this.reloadEditorContent(this.editorContent))},emitEditorState:function(){this.localStorage&&localStorage.setItem(this.storageId("VueTrix"),JSON.stringify(this.$refs.trix.editor)),this.$emit("update",this.editorContent)},storageId:function(t){return this.inputId?t+"."+this.inputId+".content":t+".content"},reloadEditorContent:function(t){this.$refs.trix.editor.loadHTML(t),this.$refs.trix.editor.setSelectedRange(this.getContentEndPosition())},getContentEndPosition:function(){return this.$refs.trix.editor.getDocument().toString().length-1},decorateDisabledEditor:function(t){t?(this.$refs.trix.toolbarElement.style["pointer-events"]="none",this.$refs.trix.contentEditable=!1,this.$refs.trix.style.background="#e9ecef"):(this.$refs.trix.toolbarElement.style["pointer-events"]="unset",this.$refs.trix.style["pointer-events"]="unset",this.$refs.trix.style.background="transparent")}},computed:{generateId:function(){return"xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g,function(t){var e=16*Math.random()|0;return("x"===t?e:3&e|8).toString(16)})},computedId:function(){return this.inputId||this.generateId},initialContent:function(){return this.srcContent},isDisabled:function(){return this.disabledEditor}},watch:{editorContent:{handler:"emitEditorState"},initialContent:{handler:"handleInitialContentChange"},isDisabled:{handler:"decorateDisabledEditor"}}};var d,c="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());var l={};function n(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{class:[t.$style.trix_container]},[n("trix-editor",{ref:"trix",class:["trix-content"],attrs:{contenteditable:!t.disabledEditor,input:t.computedId,placeholder:t.placeholder},on:{"trix-change":t.handleContentChange,"trix-file-accept":t.emitFileAccept,"trix-attachment-add":t.emitAttachmentAdd,"trix-attachment-remove":t.emitAttachmentRemove,"trix-selection-change":t.emitSelectionChange,"trix-initialize":t.emitInitialize,"trix-before-initialize":t.emitBeforeInitialize,"trix-focus":t.processTrixFocus,"trix-blur":t.processTrixBlur}}),t._v(" "),n("input",{attrs:{type:"hidden",name:t.inputName,id:t.computedId},domProps:{value:t.editorContent}})],1)}var i=e;n._withStripped=!0;var r=function(t,e,n,i,r,o,s,a,d,c){"boolean"!=typeof s&&(d=a,a=s,s=!1);var l,u="function"==typeof n?n.options:n;if(t&&t.render&&(u.render=t.render,u.staticRenderFns=t.staticRenderFns,u._compiled=!0,r&&(u.functional=!0)),i&&(u._scopeId=i),o?(l=function(t){(t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),e&&e.call(this,d(t)),t&&t._registeredComponents&&t._registeredComponents.add(o)},u._ssrRegister=l):e&&(l=s?function(t){e.call(this,c(t,this.$root.$options.shadowRoot))}:function(t){e.call(this,a(t))}),l)if(u.functional){var h=u.render;u.render=function(t,e){return l.call(e),h(t,e)}}else{var m=u.beforeCreate;u.beforeCreate=m?[].concat(m,l):[l]}return n}({render:n,staticRenderFns:[]},function(t){t&&(t("data-v-22ca123f_0",{source:"\n.src-components-trix_container-5Bcy {\n max-width: 100%;\n height: auto;\n}\n.src-components-trix_container-5Bcy .src-components-trix-button-group-2D-J {\n background-color: white;\n}\n.src-components-trix_container-5Bcy .src-components-trix-content-1TD_ {\n background-color: white;\n}\n",map:{version:3,sources:["/home/hanh/side-projects/vue-trix/src/components/VueTrix.vue"],names:[],mappings:";AAkPA;EACA,eAAA;EACA,YAAA;AACA;AACA;EACA,uBAAA;AACA;AACA;EACA,uBAAA;AACA",file:"VueTrix.vue",sourcesContent:["<template>\n <div :class=\"[$style.trix_container]\">\n <trix-editor\n :contenteditable=\"!disabledEditor\"\n :class=\"['trix-content']\"\n ref=\"trix\"\n :input=\"computedId\"\n :placeholder=\"placeholder\"\n @trix-change=\"handleContentChange\"\n @trix-file-accept=\"emitFileAccept\"\n @trix-attachment-add=\"emitAttachmentAdd\"\n @trix-attachment-remove=\"emitAttachmentRemove\"\n @trix-selection-change=\"emitSelectionChange\"\n @trix-initialize=\"emitInitialize\"\n @trix-before-initialize=\"emitBeforeInitialize\"\n @trix-focus=\"processTrixFocus\"\n @trix-blur=\"processTrixBlur\"\n />\n <input\n type=\"hidden\"\n :name=\"inputName\"\n :id=\"computedId\"\n :value=\"editorContent\"\n />\n </div>\n</template>\n\n<script>\nimport 'trix'\nimport 'trix/dist/trix.css'\nimport EmitFileAccept from '../mixins/EmitFileAccept.js'\nimport EmitInitialize from '../mixins/EmitInitialize.js'\nimport EmitAttachmentAdd from '../mixins/EmitAttachmentAdd.js'\nimport EmitSelectionChange from '../mixins/EmitSelectionChange.js'\nimport EmitAttachmentRemove from '../mixins/EmitAttachmentRemove.js'\nimport EmitBeforeInitialize from '../mixins/EmitBeforeInitialize.js'\nimport ProcessEditorFocusAndBlur from '../mixins/ProcessEditorFocusAndBlur.js'\n\nexport default {\n name: 'vue-trix',\n mixins: [\n EmitFileAccept(),\n EmitInitialize(),\n EmitAttachmentAdd(),\n EmitSelectionChange(),\n EmitAttachmentRemove(),\n EmitBeforeInitialize(),\n ProcessEditorFocusAndBlur()\n ],\n model: {\n prop: 'srcContent',\n event: 'update'\n },\n props: {\n /**\n * This prop will put the editor in read-only mode\n */\n disabledEditor: {\n type: Boolean,\n required: false,\n default () {\n return false\n }\n },\n /**\n * This is referenced `id` of the hidden input field defined.\n * It is optional and will be a random string by default.\n */\n inputId: {\n type: String,\n required: false,\n default () {\n return ''\n }\n },\n /**\n * This is referenced `name` of the hidden input field defined,\n * default value is `content`.\n */\n inputName: {\n type: String,\n required: false,\n default () {\n return 'content'\n }\n },\n /**\n * The placeholder attribute specifies a short hint\n * that describes the expected value of a editor.\n */\n placeholder: {\n type: String,\n required: false,\n default () {\n return ''\n }\n },\n /**\n * The source content is associcated to v-model directive.\n */\n srcContent: {\n type: String,\n required: false,\n default () {\n return ''\n }\n },\n /**\n * The boolean attribute allows saving editor state into browser's localStorage\n * (optional, default is `false`).\n */\n localStorage: {\n type: Boolean,\n required: false,\n default () {\n return false\n }\n }\n },\n mounted () {\n /** Check if editor read-only mode is required */\n this.decorateDisabledEditor(this.disabledEditor)\n this.$nextTick(() => {\n /**\n * If localStorage is enabled,\n * then load editor's content from the beginning.\n */\n if (this.localStorage) {\n const savedValue = localStorage.getItem(this.storageId('VueTrix'))\n if (savedValue && !this.srcContent) {\n this.$refs.trix.editor.loadJSON(JSON.parse(savedValue))\n }\n }\n })\n },\n data () {\n return {\n editorContent: this.srcContent,\n isActived: null\n }\n },\n methods: {\n handleContentChange (event) {\n this.editorContent = event.srcElement ? event.srcElement.value : event.target.value\n this.$emit('input', this.editorContent)\n },\n handleInitialContentChange (newContent, oldContent) {\n newContent = newContent === undefined ? '' : newContent\n\n if (this.$refs.trix.editor && this.$refs.trix.editor.innerHTML !== newContent) {\n /* Update editor's content when initial content changed */\n this.editorContent = newContent\n\n /**\n * If user are typing, then don't reload the editor,\n * hence keep cursor's position after typing.\n */\n if (!this.isActived) {\n this.reloadEditorContent(this.editorContent)\n }\n }\n },\n emitEditorState (value) {\n /**\n * If localStorage is enabled,\n * then save editor's content into storage\n */\n if (this.localStorage) {\n localStorage.setItem(\n this.storageId('VueTrix'),\n JSON.stringify(this.$refs.trix.editor)\n )\n }\n this.$emit('update', this.editorContent)\n },\n storageId (component) {\n if (this.inputId) {\n return `${component}.${this.inputId}.content`\n } else {\n return `${component}.content`\n }\n },\n reloadEditorContent (newContent) {\n // Reload HTML content\n this.$refs.trix.editor.loadHTML(newContent)\n\n // Move cursor to end of new content updated\n this.$refs.trix.editor.setSelectedRange(this.getContentEndPosition())\n },\n getContentEndPosition () {\n return this.$refs.trix.editor.getDocument().toString().length - 1\n },\n decorateDisabledEditor (editorState) {\n /** Disable toolbar and editor by pointer events styling */\n if (editorState) {\n this.$refs.trix.toolbarElement.style['pointer-events'] = 'none'\n this.$refs.trix.contentEditable = false\n this.$refs.trix.style['background'] = '#e9ecef'\n } else {\n this.$refs.trix.toolbarElement.style['pointer-events'] = 'unset'\n this.$refs.trix.style['pointer-events'] = 'unset'\n this.$refs.trix.style['background'] = 'transparent'\n }\n }\n },\n computed: {\n /**\n * Compute a random id of hidden input\n * when it haven't been specified.\n */\n generateId () {\n return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c => {\n var r = Math.random() * 16 | 0\n var v = c === 'x' ? r : (r & 0x3 | 0x8)\n return v.toString(16)\n })\n },\n computedId () {\n return this.inputId || this.generateId\n },\n initialContent () {\n return this.srcContent\n },\n isDisabled () {\n return this.disabledEditor\n }\n },\n watch: {\n editorContent: {\n handler: 'emitEditorState'\n },\n initialContent: {\n handler: 'handleInitialContentChange'\n },\n isDisabled: {\n handler: 'decorateDisabledEditor'\n }\n }\n}\n<\/script>\n\n<style lang=\"css\" module>\n.trix_container {\n max-width: 100%;\n height: auto;\n}\n.trix_container .trix-button-group {\n background-color: white;\n}\n.trix_container .trix-content {\n background-color: white;\n}\n</style>\n"]},media:void 0}),Object.defineProperty(this,"$style",{value:{trix_container:"src-components-trix_container-5Bcy","trix-button-group":"src-components-trix-button-group-2D-J","trix-content":"src-components-trix-content-1TD_"}}))},i,void 0,!1,void 0,!1,function(t){return function(t,e){return function(t,e){var n=c?e.media||"default":t,i=l[n]||(l[n]={ids:new Set,styles:[]});if(!i.ids.has(t)){i.ids.add(t);var r=e.source;if(e.map&&(r+="\n/*# sourceURL="+e.map.sources[0]+" */",r+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(e.map))))+" */"),i.element||(i.element=document.createElement("style"),i.element.type="text/css",e.media&&i.element.setAttribute("media",e.media),void 0===d&&(d=document.head||document.getElementsByTagName("head")[0]),d.appendChild(i.element)),"styleSheet"in i.element)i.styles.push(r),i.element.styleSheet.cssText=i.styles.filter(Boolean).join("\n");else{var o=i.ids.size-1,s=document.createTextNode(r),a=i.element.childNodes;a[o]&&i.element.removeChild(a[o]),a.length?i.element.insertBefore(s,a[o]):i.element.appendChild(s)}}}(t,e)}},void 0,void 0);return t.config.ignoredElements=["trix-editor"],t.component(r.name,r),r}(Vue);
//# sourceMappingURL=vue-trix.min.js.map
+1
-1
dist/vue-trix.min.js.map

@@ -1,1 +0,1 @@

{"version":3,"file":"vue-trix.min.js","sources":["../src/mixins/EmitFileAccept.js","../src/mixins/EmitInitialize.js","../src/mixins/EmitAttachmentAdd.js","../src/mixins/EmitSelectionChange.js","../src/mixins/EmitAttachmentRemove.js","../src/mixins/EmitBeforeInitialize.js","../src/mixins/ProcessEditorFocusAndBlur.js","../node_modules/vue-runtime-helpers/dist/inject-style/browser.mjs","../src/components/VueTrix.vue","../node_modules/vue-runtime-helpers/dist/normalize-component.mjs","../src/index.js"],"sourcesContent":["/**\n *\n * @param {*} component\n */\nexport default function (component) {\n return {\n methods: {\n emitFileAccept (file) {\n this.$emit('trix-file-accept', file)\n }\n }\n }\n}\n","/**\n *\n * @param {*} component\n */\nexport default function (component) {\n return {\n methods: {\n emitInitialize (editor) {\n this.$emit('trix-initialize', this.$refs.trix.editor, event)\n }\n }\n }\n}\n","/**\n *\n * @param {*} component\n */\nexport default function (component) {\n return {\n methods: {\n emitAttachmentAdd (file) {\n this.$emit('trix-attachment-add', file)\n }\n }\n }\n}\n","/**\n *\n * @param {*} component\n */\nexport default function (component) {\n return {\n methods: {\n emitSelectionChange (event) {\n this.$emit('trix-selection-change', this.$refs.trix.editor, event)\n }\n }\n }\n}\n","/**\n *\n * @param {*} component\n */\nexport default function (component) {\n return {\n methods: {\n emitAttachmentRemove (file) {\n this.$emit('trix-attachment-remove', file)\n }\n }\n }\n}\n","/**\n *\n * @param {*} component\n */\nexport default function (component) {\n return {\n methods: {\n emitBeforeInitialize (event) {\n this.$emit('trix-before-initialize', this.$refs.trix.editor, event)\n }\n }\n }\n}\n","export default function (component) {\n return {\n methods: {\n processTrixFocus (event) {\n if (this.$refs.trix) {\n this.isActived = true\n this.$emit('trix-focus', this.$refs.trix.editor, event)\n }\n },\n processTrixBlur (event) {\n if (this.$refs.trix) {\n this.isActived = false\n this.$emit('trix-blur', this.$refs.trix.editor, event)\n }\n }\n }\n }\n}\n","const isOldIE = typeof navigator !== 'undefined' &&\r\n /msie [6-9]\\\\b/.test(navigator.userAgent.toLowerCase());\r\nfunction createInjector(context) {\r\n return (id, style) => addStyle(id, style);\r\n}\r\nlet HEAD;\r\nconst styles = {};\r\nfunction addStyle(id, css) {\r\n const group = isOldIE ? css.media || 'default' : id;\r\n const style = styles[group] || (styles[group] = { ids: new Set(), styles: [] });\r\n if (!style.ids.has(id)) {\r\n style.ids.add(id);\r\n let code = css.source;\r\n if (css.map) {\r\n // https://developer.chrome.com/devtools/docs/javascript-debugging\r\n // this makes source maps inside style tags work properly in Chrome\r\n code += '\\n/*# sourceURL=' + css.map.sources[0] + ' */';\r\n // http://stackoverflow.com/a/26603875\r\n code +=\r\n '\\n/*# sourceMappingURL=data:application/json;base64,' +\r\n btoa(unescape(encodeURIComponent(JSON.stringify(css.map)))) +\r\n ' */';\r\n }\r\n if (!style.element) {\r\n style.element = document.createElement('style');\r\n style.element.type = 'text/css';\r\n if (css.media)\r\n style.element.setAttribute('media', css.media);\r\n if (HEAD === undefined) {\r\n HEAD = document.head || document.getElementsByTagName('head')[0];\r\n }\r\n HEAD.appendChild(style.element);\r\n }\r\n if ('styleSheet' in style.element) {\r\n style.styles.push(code);\r\n style.element.styleSheet.cssText = style.styles\r\n .filter(Boolean)\r\n .join('\\n');\r\n }\r\n else {\r\n const index = style.ids.size - 1;\r\n const textNode = document.createTextNode(code);\r\n const nodes = style.element.childNodes;\r\n if (nodes[index])\r\n style.element.removeChild(nodes[index]);\r\n if (nodes.length)\r\n style.element.insertBefore(textNode, nodes[index]);\r\n else\r\n style.element.appendChild(textNode);\r\n }\r\n }\r\n}\n\nexport default createInjector;\n//# sourceMappingURL=browser.mjs.map\n","<template>\n <div :class=\"[$style.trix_container]\">\n <trix-editor\n :contenteditable=\"!disabledEditor\"\n :class=\"['trix-content']\"\n ref=\"trix\"\n :input=\"computedId\"\n :placeholder=\"placeholder\"\n @trix-change=\"handleContentChange\"\n @trix-file-accept=\"emitFileAccept\"\n @trix-attachment-add=\"emitAttachmentAdd\"\n @trix-attachment-remove=\"emitAttachmentRemove\"\n @trix-selection-change=\"emitSelectionChange\"\n @trix-initialize=\"emitInitialize\"\n @trix-before-initialize=\"emitBeforeInitialize\"\n @trix-focus=\"processTrixFocus\"\n @trix-blur=\"processTrixBlur\"\n />\n <input\n type=\"hidden\"\n :name=\"inputName\"\n :id=\"computedId\"\n :value=\"editorContent\"\n />\n </div>\n</template>\n\n<script>\nimport 'trix'\nimport 'trix/dist/trix.css'\nimport EmitFileAccept from '../mixins/EmitFileAccept.js'\nimport EmitInitialize from '../mixins/EmitInitialize.js'\nimport EmitAttachmentAdd from '../mixins/EmitAttachmentAdd.js'\nimport EmitSelectionChange from '../mixins/EmitSelectionChange.js'\nimport EmitAttachmentRemove from '../mixins/EmitAttachmentRemove.js'\nimport EmitBeforeInitialize from '../mixins/EmitBeforeInitialize.js'\nimport ProcessEditorFocusAndBlur from '../mixins/ProcessEditorFocusAndBlur.js'\n\nexport default {\n name: 'vue-trix',\n mixins: [\n EmitFileAccept(),\n EmitInitialize(),\n EmitAttachmentAdd(),\n EmitSelectionChange(),\n EmitAttachmentRemove(),\n EmitBeforeInitialize(),\n ProcessEditorFocusAndBlur()\n ],\n model: {\n prop: 'srcContent',\n event: 'update'\n },\n props: {\n /**\n * This prop will put the editor in read-only mode\n */\n disabledEditor: {\n type: Boolean,\n required: false,\n default () {\n return false\n }\n },\n /**\n * This is referenced `id` of the hidden input field defined.\n * It is optional and will be a random string by default.\n */\n inputId: {\n type: String,\n required: false,\n default () {\n return ''\n }\n },\n /**\n * This is referenced `name` of the hidden input field defined,\n * default value is `content`.\n */\n inputName: {\n type: String,\n required: false,\n default () {\n return 'content'\n }\n },\n /**\n * The placeholder attribute specifies a short hint\n * that describes the expected value of a editor.\n */\n placeholder: {\n type: String,\n required: false,\n default () {\n return ''\n }\n },\n /**\n * The source content is associcated to v-model directive.\n */\n srcContent: {\n type: String,\n required: false,\n default () {\n return ''\n }\n },\n /**\n * The boolean attribute allows saving editor state into browser's localStorage\n * (optional, default is `false`).\n */\n localStorage: {\n type: Boolean,\n required: false,\n default () {\n return false\n }\n }\n },\n created () {},\n mounted () {\n /** Check if editor read-only mode is required */\n this.decorateDisabledEditor(this.disabledEditor)\n this.$nextTick(() => {\n /**\n * If localStorage is enabled,\n * then load editor's content from the beginning.\n */\n if (this.localStorage) {\n const savedValue = localStorage.getItem(this.storageId('VueTrix'))\n if (savedValue && !this.srcContent) {\n this.$refs.trix.editor.loadJSON(JSON.parse(savedValue))\n }\n }\n })\n },\n data () {\n return {\n editorContent: this.srcContent,\n isActived: null\n }\n },\n methods: {\n handleContentChange (event) {\n this.editorContent = event.srcElement ? event.srcElement.value : event.target.value\n this.$emit('input', this.editorContent)\n },\n handleInitialContentChange (newContent, oldContent) {\n newContent = newContent === undefined ? '' : newContent\n\n if (this.$refs.trix.editor && this.$refs.trix.editor.innerHTML !== newContent) {\n /* Update editor's content when initial content changed */\n this.editorContent = newContent\n\n /**\n * If user are typing, then don't reload the editor,\n * hence keep cursor's position after typing.\n */\n if (!this.isActived) {\n this.reloadEditorContent(this.editorContent)\n }\n }\n },\n emitEditorState (value) {\n /**\n * If localStorage is enabled,\n * then save editor's content into storage\n */\n if (this.localStorage) {\n localStorage.setItem(\n this.storageId('VueTrix'),\n JSON.stringify(this.$refs.trix.editor)\n )\n }\n this.$emit('update', this.editorContent)\n },\n storageId (component) {\n if (this.inputId) {\n return `${component}.${this.inputId}.content`\n } else {\n return `${component}.content`\n }\n },\n reloadEditorContent (newContent) {\n // Reload HTML content\n this.$refs.trix.editor.loadHTML(newContent)\n\n // Move cursor to end of new content updated\n this.$refs.trix.editor.setSelectedRange(this.getContentEndPosition())\n },\n getContentEndPosition () {\n return this.$refs.trix.editor.getDocument().toString().length - 1\n },\n decorateDisabledEditor (editorState) {\n /** Disable toolbar and editor by pointer events styling */\n if (editorState) {\n this.$refs.trix.toolbarElement.style['pointer-events'] = 'none'\n this.$refs.trix.style['pointer-events'] = 'none'\n this.$refs.trix.style['background'] = '#e9ecef'\n } else {\n this.$refs.trix.toolbarElement.style['pointer-events'] = 'unset'\n this.$refs.trix.style['pointer-events'] = 'unset'\n this.$refs.trix.style['background'] = 'transparent'\n }\n }\n },\n computed: {\n /**\n * Compute a random id of hidden input\n * when it haven't been specified.\n */\n generateId () {\n return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c => {\n var r = Math.random() * 16 | 0\n var v = c === 'x' ? r : (r & 0x3 | 0x8)\n return v.toString(16)\n })\n },\n computedId () {\n return this.inputId || this.generateId\n },\n initialContent () {\n return this.srcContent\n },\n isDisabled () {\n return this.disabledEditor\n }\n },\n watch: {\n editorContent: {\n handler: 'emitEditorState'\n },\n initialContent: {\n handler: 'handleInitialContentChange'\n },\n isDisabled: {\n handler: 'decorateDisabledEditor'\n }\n }\n}\n</script>\n\n<style lang=\"css\" module>\n.trix_container {\n max-width: 100%;\n height: auto;\n}\n.trix_container .trix-button-group {\n background-color: white;\n}\n.trix_container .trix-content {\n background-color: white;\n}\n</style>\n","function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier /* server only */, shadowMode, createInjector, createInjectorSSR, createInjectorShadow) {\r\n if (typeof shadowMode !== 'boolean') {\r\n createInjectorSSR = createInjector;\r\n createInjector = shadowMode;\r\n shadowMode = false;\r\n }\r\n // Vue.extend constructor export interop.\r\n const options = typeof script === 'function' ? script.options : script;\r\n // render functions\r\n if (template && template.render) {\r\n options.render = template.render;\r\n options.staticRenderFns = template.staticRenderFns;\r\n options._compiled = true;\r\n // functional template\r\n if (isFunctionalTemplate) {\r\n options.functional = true;\r\n }\r\n }\r\n // scopedId\r\n if (scopeId) {\r\n options._scopeId = scopeId;\r\n }\r\n let hook;\r\n if (moduleIdentifier) {\r\n // server build\r\n hook = function (context) {\r\n // 2.3 injection\r\n context =\r\n context || // cached call\r\n (this.$vnode && this.$vnode.ssrContext) || // stateful\r\n (this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext); // functional\r\n // 2.2 with runInNewContext: true\r\n if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {\r\n context = __VUE_SSR_CONTEXT__;\r\n }\r\n // inject component styles\r\n if (style) {\r\n style.call(this, createInjectorSSR(context));\r\n }\r\n // register component module identifier for async chunk inference\r\n if (context && context._registeredComponents) {\r\n context._registeredComponents.add(moduleIdentifier);\r\n }\r\n };\r\n // used by ssr in case component is cached and beforeCreate\r\n // never gets called\r\n options._ssrRegister = hook;\r\n }\r\n else if (style) {\r\n hook = shadowMode\r\n ? function (context) {\r\n style.call(this, createInjectorShadow(context, this.$root.$options.shadowRoot));\r\n }\r\n : function (context) {\r\n style.call(this, createInjector(context));\r\n };\r\n }\r\n if (hook) {\r\n if (options.functional) {\r\n // register for functional component in vue file\r\n const originalRender = options.render;\r\n options.render = function renderWithStyleInjection(h, context) {\r\n hook.call(context);\r\n return originalRender(h, context);\r\n };\r\n }\r\n else {\r\n // inject component registration as beforeCreate hook\r\n const existing = options.beforeCreate;\r\n options.beforeCreate = existing ? [].concat(existing, hook) : [hook];\r\n }\r\n }\r\n return script;\r\n}\n\nexport default normalizeComponent;\n//# sourceMappingURL=normalize-component.mjs.map\n","/*\n * Vue-Trix index.js\n * Author: tranduchanh.ms@gmail.com\n * Github: https://github.com/hanhdt/vue-trix\n */\n\nimport Vue from 'vue'\nimport VueTrix from './components/VueTrix.vue'\nVue.config.ignoredElements = ['trix-editor']\n\nVue.component(VueTrix.name, VueTrix)\n\nexport default VueTrix\n"],"names":["methods","emitFileAccept","file","this","$emit","emitInitialize","$refs","trix","editor","event","emitAttachmentAdd","emitSelectionChange","emitAttachmentRemove","emitBeforeInitialize","processTrixFocus","isActived","processTrixBlur","const","HEAD","isOldIE","navigator","test","userAgent","toLowerCase","styles","template","style","script","scopeId","isFunctionalTemplate","moduleIdentifier","shadowMode","createInjector","createInjectorSSR","createInjectorShadow","hook","options","render","staticRenderFns","_compiled","functional","_scopeId","context","$vnode","ssrContext","parent","__VUE_SSR_CONTEXT__","call","_registeredComponents","add","_ssrRegister","$root","$options","shadowRoot","originalRender","h","existing","beforeCreate","concat","id","css","group","media","ids","Set","has","let","code","source","map","sources","btoa","unescape","encodeURIComponent","JSON","stringify","element","document","createElement","type","setAttribute","undefined","head","getElementsByTagName","appendChild","push","styleSheet","cssText","filter","Boolean","join","index","size","textNode","createTextNode","nodes","childNodes","removeChild","length","insertBefore","addStyle","Vue","config","ignoredElements","component","VueTrix","name"],"mappings":"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"}
{"version":3,"file":"vue-trix.min.js","sources":["../src/mixins/EmitFileAccept.js","../src/mixins/EmitInitialize.js","../src/mixins/EmitAttachmentAdd.js","../src/mixins/EmitSelectionChange.js","../src/mixins/EmitAttachmentRemove.js","../src/mixins/EmitBeforeInitialize.js","../src/mixins/ProcessEditorFocusAndBlur.js","../node_modules/vue-runtime-helpers/dist/inject-style/browser.mjs","../src/components/VueTrix.vue","../node_modules/vue-runtime-helpers/dist/normalize-component.mjs","../src/index.js"],"sourcesContent":["/**\n *\n * @param {*} component\n */\nexport default function (component) {\n return {\n methods: {\n emitFileAccept (file) {\n this.$emit('trix-file-accept', file)\n }\n }\n }\n}\n","/**\n *\n * @param {*} component\n */\nexport default function (component) {\n return {\n methods: {\n emitInitialize (editor) {\n this.$emit('trix-initialize', this.$refs.trix.editor, event)\n }\n }\n }\n}\n","/**\n *\n * @param {*} component\n */\nexport default function (component) {\n return {\n methods: {\n emitAttachmentAdd (file) {\n this.$emit('trix-attachment-add', file)\n }\n }\n }\n}\n","/**\n *\n * @param {*} component\n */\nexport default function (component) {\n return {\n methods: {\n emitSelectionChange (event) {\n this.$emit('trix-selection-change', this.$refs.trix.editor, event)\n }\n }\n }\n}\n","/**\n *\n * @param {*} component\n */\nexport default function (component) {\n return {\n methods: {\n emitAttachmentRemove (file) {\n this.$emit('trix-attachment-remove', file)\n }\n }\n }\n}\n","/**\n *\n * @param {*} component\n */\nexport default function (component) {\n return {\n methods: {\n emitBeforeInitialize (event) {\n this.$emit('trix-before-initialize', this.$refs.trix.editor, event)\n }\n }\n }\n}\n","export default function (component) {\n return {\n methods: {\n processTrixFocus (event) {\n if (this.$refs.trix) {\n this.isActived = true\n this.$emit('trix-focus', this.$refs.trix.editor, event)\n }\n },\n processTrixBlur (event) {\n if (this.$refs.trix) {\n this.isActived = false\n this.$emit('trix-blur', this.$refs.trix.editor, event)\n }\n }\n }\n }\n}\n","const isOldIE = typeof navigator !== 'undefined' &&\r\n /msie [6-9]\\\\b/.test(navigator.userAgent.toLowerCase());\r\nfunction createInjector(context) {\r\n return (id, style) => addStyle(id, style);\r\n}\r\nlet HEAD;\r\nconst styles = {};\r\nfunction addStyle(id, css) {\r\n const group = isOldIE ? css.media || 'default' : id;\r\n const style = styles[group] || (styles[group] = { ids: new Set(), styles: [] });\r\n if (!style.ids.has(id)) {\r\n style.ids.add(id);\r\n let code = css.source;\r\n if (css.map) {\r\n // https://developer.chrome.com/devtools/docs/javascript-debugging\r\n // this makes source maps inside style tags work properly in Chrome\r\n code += '\\n/*# sourceURL=' + css.map.sources[0] + ' */';\r\n // http://stackoverflow.com/a/26603875\r\n code +=\r\n '\\n/*# sourceMappingURL=data:application/json;base64,' +\r\n btoa(unescape(encodeURIComponent(JSON.stringify(css.map)))) +\r\n ' */';\r\n }\r\n if (!style.element) {\r\n style.element = document.createElement('style');\r\n style.element.type = 'text/css';\r\n if (css.media)\r\n style.element.setAttribute('media', css.media);\r\n if (HEAD === undefined) {\r\n HEAD = document.head || document.getElementsByTagName('head')[0];\r\n }\r\n HEAD.appendChild(style.element);\r\n }\r\n if ('styleSheet' in style.element) {\r\n style.styles.push(code);\r\n style.element.styleSheet.cssText = style.styles\r\n .filter(Boolean)\r\n .join('\\n');\r\n }\r\n else {\r\n const index = style.ids.size - 1;\r\n const textNode = document.createTextNode(code);\r\n const nodes = style.element.childNodes;\r\n if (nodes[index])\r\n style.element.removeChild(nodes[index]);\r\n if (nodes.length)\r\n style.element.insertBefore(textNode, nodes[index]);\r\n else\r\n style.element.appendChild(textNode);\r\n }\r\n }\r\n}\n\nexport default createInjector;\n//# sourceMappingURL=browser.mjs.map\n","<template>\n <div :class=\"[$style.trix_container]\">\n <trix-editor\n :contenteditable=\"!disabledEditor\"\n :class=\"['trix-content']\"\n ref=\"trix\"\n :input=\"computedId\"\n :placeholder=\"placeholder\"\n @trix-change=\"handleContentChange\"\n @trix-file-accept=\"emitFileAccept\"\n @trix-attachment-add=\"emitAttachmentAdd\"\n @trix-attachment-remove=\"emitAttachmentRemove\"\n @trix-selection-change=\"emitSelectionChange\"\n @trix-initialize=\"emitInitialize\"\n @trix-before-initialize=\"emitBeforeInitialize\"\n @trix-focus=\"processTrixFocus\"\n @trix-blur=\"processTrixBlur\"\n />\n <input\n type=\"hidden\"\n :name=\"inputName\"\n :id=\"computedId\"\n :value=\"editorContent\"\n />\n </div>\n</template>\n\n<script>\nimport 'trix'\nimport 'trix/dist/trix.css'\nimport EmitFileAccept from '../mixins/EmitFileAccept.js'\nimport EmitInitialize from '../mixins/EmitInitialize.js'\nimport EmitAttachmentAdd from '../mixins/EmitAttachmentAdd.js'\nimport EmitSelectionChange from '../mixins/EmitSelectionChange.js'\nimport EmitAttachmentRemove from '../mixins/EmitAttachmentRemove.js'\nimport EmitBeforeInitialize from '../mixins/EmitBeforeInitialize.js'\nimport ProcessEditorFocusAndBlur from '../mixins/ProcessEditorFocusAndBlur.js'\n\nexport default {\n name: 'vue-trix',\n mixins: [\n EmitFileAccept(),\n EmitInitialize(),\n EmitAttachmentAdd(),\n EmitSelectionChange(),\n EmitAttachmentRemove(),\n EmitBeforeInitialize(),\n ProcessEditorFocusAndBlur()\n ],\n model: {\n prop: 'srcContent',\n event: 'update'\n },\n props: {\n /**\n * This prop will put the editor in read-only mode\n */\n disabledEditor: {\n type: Boolean,\n required: false,\n default () {\n return false\n }\n },\n /**\n * This is referenced `id` of the hidden input field defined.\n * It is optional and will be a random string by default.\n */\n inputId: {\n type: String,\n required: false,\n default () {\n return ''\n }\n },\n /**\n * This is referenced `name` of the hidden input field defined,\n * default value is `content`.\n */\n inputName: {\n type: String,\n required: false,\n default () {\n return 'content'\n }\n },\n /**\n * The placeholder attribute specifies a short hint\n * that describes the expected value of a editor.\n */\n placeholder: {\n type: String,\n required: false,\n default () {\n return ''\n }\n },\n /**\n * The source content is associcated to v-model directive.\n */\n srcContent: {\n type: String,\n required: false,\n default () {\n return ''\n }\n },\n /**\n * The boolean attribute allows saving editor state into browser's localStorage\n * (optional, default is `false`).\n */\n localStorage: {\n type: Boolean,\n required: false,\n default () {\n return false\n }\n }\n },\n mounted () {\n /** Check if editor read-only mode is required */\n this.decorateDisabledEditor(this.disabledEditor)\n this.$nextTick(() => {\n /**\n * If localStorage is enabled,\n * then load editor's content from the beginning.\n */\n if (this.localStorage) {\n const savedValue = localStorage.getItem(this.storageId('VueTrix'))\n if (savedValue && !this.srcContent) {\n this.$refs.trix.editor.loadJSON(JSON.parse(savedValue))\n }\n }\n })\n },\n data () {\n return {\n editorContent: this.srcContent,\n isActived: null\n }\n },\n methods: {\n handleContentChange (event) {\n this.editorContent = event.srcElement ? event.srcElement.value : event.target.value\n this.$emit('input', this.editorContent)\n },\n handleInitialContentChange (newContent, oldContent) {\n newContent = newContent === undefined ? '' : newContent\n\n if (this.$refs.trix.editor && this.$refs.trix.editor.innerHTML !== newContent) {\n /* Update editor's content when initial content changed */\n this.editorContent = newContent\n\n /**\n * If user are typing, then don't reload the editor,\n * hence keep cursor's position after typing.\n */\n if (!this.isActived) {\n this.reloadEditorContent(this.editorContent)\n }\n }\n },\n emitEditorState (value) {\n /**\n * If localStorage is enabled,\n * then save editor's content into storage\n */\n if (this.localStorage) {\n localStorage.setItem(\n this.storageId('VueTrix'),\n JSON.stringify(this.$refs.trix.editor)\n )\n }\n this.$emit('update', this.editorContent)\n },\n storageId (component) {\n if (this.inputId) {\n return `${component}.${this.inputId}.content`\n } else {\n return `${component}.content`\n }\n },\n reloadEditorContent (newContent) {\n // Reload HTML content\n this.$refs.trix.editor.loadHTML(newContent)\n\n // Move cursor to end of new content updated\n this.$refs.trix.editor.setSelectedRange(this.getContentEndPosition())\n },\n getContentEndPosition () {\n return this.$refs.trix.editor.getDocument().toString().length - 1\n },\n decorateDisabledEditor (editorState) {\n /** Disable toolbar and editor by pointer events styling */\n if (editorState) {\n this.$refs.trix.toolbarElement.style['pointer-events'] = 'none'\n this.$refs.trix.contentEditable = false\n this.$refs.trix.style['background'] = '#e9ecef'\n } else {\n this.$refs.trix.toolbarElement.style['pointer-events'] = 'unset'\n this.$refs.trix.style['pointer-events'] = 'unset'\n this.$refs.trix.style['background'] = 'transparent'\n }\n }\n },\n computed: {\n /**\n * Compute a random id of hidden input\n * when it haven't been specified.\n */\n generateId () {\n return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c => {\n var r = Math.random() * 16 | 0\n var v = c === 'x' ? r : (r & 0x3 | 0x8)\n return v.toString(16)\n })\n },\n computedId () {\n return this.inputId || this.generateId\n },\n initialContent () {\n return this.srcContent\n },\n isDisabled () {\n return this.disabledEditor\n }\n },\n watch: {\n editorContent: {\n handler: 'emitEditorState'\n },\n initialContent: {\n handler: 'handleInitialContentChange'\n },\n isDisabled: {\n handler: 'decorateDisabledEditor'\n }\n }\n}\n</script>\n\n<style lang=\"css\" module>\n.trix_container {\n max-width: 100%;\n height: auto;\n}\n.trix_container .trix-button-group {\n background-color: white;\n}\n.trix_container .trix-content {\n background-color: white;\n}\n</style>\n","function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier /* server only */, shadowMode, createInjector, createInjectorSSR, createInjectorShadow) {\r\n if (typeof shadowMode !== 'boolean') {\r\n createInjectorSSR = createInjector;\r\n createInjector = shadowMode;\r\n shadowMode = false;\r\n }\r\n // Vue.extend constructor export interop.\r\n const options = typeof script === 'function' ? script.options : script;\r\n // render functions\r\n if (template && template.render) {\r\n options.render = template.render;\r\n options.staticRenderFns = template.staticRenderFns;\r\n options._compiled = true;\r\n // functional template\r\n if (isFunctionalTemplate) {\r\n options.functional = true;\r\n }\r\n }\r\n // scopedId\r\n if (scopeId) {\r\n options._scopeId = scopeId;\r\n }\r\n let hook;\r\n if (moduleIdentifier) {\r\n // server build\r\n hook = function (context) {\r\n // 2.3 injection\r\n context =\r\n context || // cached call\r\n (this.$vnode && this.$vnode.ssrContext) || // stateful\r\n (this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext); // functional\r\n // 2.2 with runInNewContext: true\r\n if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {\r\n context = __VUE_SSR_CONTEXT__;\r\n }\r\n // inject component styles\r\n if (style) {\r\n style.call(this, createInjectorSSR(context));\r\n }\r\n // register component module identifier for async chunk inference\r\n if (context && context._registeredComponents) {\r\n context._registeredComponents.add(moduleIdentifier);\r\n }\r\n };\r\n // used by ssr in case component is cached and beforeCreate\r\n // never gets called\r\n options._ssrRegister = hook;\r\n }\r\n else if (style) {\r\n hook = shadowMode\r\n ? function (context) {\r\n style.call(this, createInjectorShadow(context, this.$root.$options.shadowRoot));\r\n }\r\n : function (context) {\r\n style.call(this, createInjector(context));\r\n };\r\n }\r\n if (hook) {\r\n if (options.functional) {\r\n // register for functional component in vue file\r\n const originalRender = options.render;\r\n options.render = function renderWithStyleInjection(h, context) {\r\n hook.call(context);\r\n return originalRender(h, context);\r\n };\r\n }\r\n else {\r\n // inject component registration as beforeCreate hook\r\n const existing = options.beforeCreate;\r\n options.beforeCreate = existing ? [].concat(existing, hook) : [hook];\r\n }\r\n }\r\n return script;\r\n}\n\nexport default normalizeComponent;\n//# sourceMappingURL=normalize-component.mjs.map\n","/*\n * Vue-Trix index.js\n * Author: tranduchanh.ms@gmail.com\n * Github: https://github.com/hanhdt/vue-trix\n */\n\nimport Vue from 'vue'\nimport VueTrix from './components/VueTrix.vue'\nVue.config.ignoredElements = ['trix-editor']\n\nVue.component(VueTrix.name, VueTrix)\n\nexport default VueTrix\n"],"names":["methods","emitFileAccept","file","this","$emit","emitInitialize","$refs","trix","editor","event","emitAttachmentAdd","emitSelectionChange","emitAttachmentRemove","emitBeforeInitialize","processTrixFocus","isActived","processTrixBlur","const","HEAD","isOldIE","navigator","test","userAgent","toLowerCase","styles","template","style","script","scopeId","isFunctionalTemplate","moduleIdentifier","shadowMode","createInjector","createInjectorSSR","createInjectorShadow","hook","options","render","staticRenderFns","_compiled","functional","_scopeId","context","$vnode","ssrContext","parent","__VUE_SSR_CONTEXT__","call","_registeredComponents","add","_ssrRegister","$root","$options","shadowRoot","originalRender","h","existing","beforeCreate","concat","id","css","group","media","ids","Set","has","let","code","source","map","sources","btoa","unescape","encodeURIComponent","JSON","stringify","element","document","createElement","type","setAttribute","undefined","head","getElementsByTagName","appendChild","push","styleSheet","cssText","filter","Boolean","join","index","size","textNode","createTextNode","nodes","childNodes","removeChild","length","insertBefore","addStyle","Vue","config","ignoredElements","component","VueTrix","name"],"mappings":"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"}
+5
-5
package.json
{
"name": "vue-trix",
"version": "1.1.7",
"version": "1.1.9",
"description": "Lightweight and simple Trix rich-text editor component for Vue.js",

@@ -59,3 +59,3 @@ "main": "dist/vue-trix.umd.js",

"babel-eslint": "^10.0.1",
"babel-jest": "^24.9.0",
"babel-jest": "^25.1.0",
"identity-obj-proxy": "^3.0.0",

@@ -65,5 +65,5 @@ "jest-serializer-vue": "^2.0.2",

"js-beautify": "^1.10.2",
"rollup": "^1.29.0",
"rollup": "^1.32.1",
"rollup-plugin-alias": "^2.2.0",
"rollup-plugin-babel": "^4.3.2",
"rollup-plugin-babel": "^4.4.0",
"rollup-plugin-buble": "^0.19.6",

@@ -76,3 +76,3 @@ "rollup-plugin-commonjs": "^10.0.1",

"rollup-plugin-vue": "^5.1.5",
"sass-loader": "^7.0.1",
"sass-loader": "^8.0.2",
"uglify-es": "^3.3.9",

@@ -79,0 +79,0 @@ "vue": "^2.6.10",

+52
-28
README.md

@@ -1,9 +0,13 @@

# Vue-Trix Text Editor [![npm](https://img.shields.io/npm/v/vue-trix.svg?style=flat)](https://www.npmjs.com/package/vue-trix) [![Build status](https://ci.appveyor.com/api/projects/status/nffmo893v52evpgm/branch/master?svg=true)](https://ci.appveyor.com/project/tranduchanh/vue-trix/branch/master) <img alt="npm" src="https://img.shields.io/npm/dm/vue-trix.svg">
# Vue-Trix Text Editor
[![npm](https://img.shields.io/npm/v/vue-trix.svg?style=flat)](https://www.npmjs.com/package/vue-trix) [![Build status](https://ci.appveyor.com/api/projects/status/nffmo893v52evpgm/branch/master?svg=true)](https://ci.appveyor.com/project/tranduchanh/vue-trix/branch/master) <img alt="npm" src="https://img.shields.io/npm/dm/vue-trix.svg">
Simple and lightweight [Trix](https://www.npmjs.com/package/trix) rich-text editor Vue.js component for writing daily
**Table of Contents**
## Table of Contents
- [Vue-Trix Text Editor](#vue-trix-text-editor)
- [Table of Contents](#table-of-contents)
- [Getting started](#getting-started)
- [Demo page](#sample-page)
- [Demo page](#demo-page)
- [Integrate into the form](#integrate-into-the-form)

@@ -18,2 +22,3 @@ - [Features](#features)

- [Mount with component](#mount-with-component)
- [Setup with Nuxt.js (SSR)](#setup-with-nuxtjs-ssr)
- [Component Usages](#component-usages)

@@ -26,3 +31,3 @@ - [Create a simple editor in your single component file](#create-a-simple-editor-in-your-single-component-file)

- [Track data changes](#track-data-changes)
- [Binding attachment changes](#binding-attachment-changes)
- [Binding attachment events](#binding-attachment-events)
- [Process uploading attachment to remote server](#process-uploading-attachment-to-remote-server)

@@ -91,2 +96,21 @@ - [Trix document](#trix-document)

### Setup with Nuxt.js (SSR)
Create mounting plugin file
```javascript
// plugins/vue_trix.js
import Vue from "vue";
import VueTrix from "vue-trix";
Vue.use(VueTrix);
```
Update Nuxt.js config file
```javascript
// nuxt.config.js
plugins: [{ src: "~/plugins/vue_trix", mode: "client" }];
```
## Component Usages

@@ -185,31 +209,31 @@

```HTML
<template>
<!-- ... -->
<VueTrix @trix-attachment-add="handleAttachmentChanges"/>
<!-- ... -->
</template>
```
```HTML
<template>
<!-- ... -->
<VueTrix @trix-attachment-add="handleAttachmentChanges"/>
<!-- ... -->
</template>
```
In Javascript
In Javascript
```Javascript
const remoteHost = 'your remote host';
```Javascript
const remoteHost = 'your remote host';
function handleAttachmentChanges(event) {
// 1. get file object
let file = event.attachment.file;
function handleAttachmentChanges(event) {
// 1. get file object
let file = event.attachment.file;
// 2. upload file to remote server with FormData
// ...
// 2. upload file to remote server with FormData
// ...
// 3. if upload success, set back the attachment's URL attribute
// @param object data from remote server response data after upload.
let attributes = {
url: remoteHost + data.path,
href: remoteHost + data.path
};
event.attachment.setAttributes(attributes);
}
```
// 3. if upload success, set back the attachment's URL attribute
// @param object data from remote server response data after upload.
let attributes = {
url: remoteHost + data.path,
href: remoteHost + data.path
};
event.attachment.setAttributes(attributes);
}
```

@@ -216,0 +240,0 @@ ## Trix document

+1
-2
src/components/VueTrix.vue

@@ -120,3 +120,2 @@ <template>

},
created () {},
mounted () {

@@ -199,3 +198,3 @@ /** Check if editor read-only mode is required */

this.$refs.trix.toolbarElement.style['pointer-events'] = 'none'
this.$refs.trix.style['pointer-events'] = 'none'
this.$refs.trix.contentEditable = false
this.$refs.trix.style['background'] = '#e9ecef'

@@ -202,0 +201,0 @@ } else {

dist/vue-trix.common.js

Sorry, the diff of this file is too big to display

dist/vue-trix.common.js.map

Sorry, the diff of this file is too big to display

dist/vue-trix.umd.js

Sorry, the diff of this file is too big to display

dist/vue-trix.umd.js.map

Sorry, the diff of this file is too big to display

dist/vue-trix.umd.min.js

Sorry, the diff of this file is too big to display

dist/vue-trix.umd.min.js.map

Sorry, the diff of this file is too big to display

package-lock.json

Sorry, the diff of this file is too big to display