vue-editify 0.2.14 → 0.2.16

package/src/feature/video.ts

@@ -0,0 +1,335 @@
+import { computed, defineComponent, h, inject, PropType, ref, Ref } from 'vue'
+import { AlexEditor, AlexElementsRangeType } from 'alex-editor'
+import { Button } from '@/components/button'
+import { Icon } from '@/components/icon'
+import { getMatchElementByRange, hasMathformulaInRange, hasPreInRange, insertVideo } from '@/core/function'
+import { InsertVideo } from '@/components/insertVideo'
+import { MenuVideoButtonType } from '@/core/tool'
+
+export type VideoConfigType = {
+	controls: boolean
+	loop: boolean
+	autoplay: boolean
+	muted: boolean
+}
+
+/**
+ * feature名称
+ */
+const FEATURE_NAME = 'video'
+
+/**
+ * 工具栏 - 视频操作
+ */
+export const VideoToolbar = defineComponent(
+	(props, { emit }) => {
+		const editor = inject<Ref<AlexEditor>>('editor')!
+		const dataRangeCaches = inject<Ref<AlexElementsRangeType>>('dataRangeCaches')!
+		const $editTrans = inject<(key: string) => any>('$editTrans')!
+
+		//视频参数配置
+		const videoConfig = computed<VideoConfigType>(() => {
+			const video = getMatchElementByRange(editor.value, dataRangeCaches.value, { parsedom: 'video' })
+			if (video) {
+				return {
+					controls: !!video.marks!['controls'],
+					loop: !!video.marks!['loop'],
+					autoplay: !!video.marks!['autoplay'],
+					muted: !!video.marks!['muted']
+				}
+			}
+			return {
+				controls: false,
+				loop: false,
+				autoplay: false,
+				muted: false
+			}
+		})
+
+		//设置视频宽度
+		const setWidth = (value: string) => {
+			const element = editor.value.range!.anchor.element
+			if (element) {
+				const styles = {
+					width: value
+				}
+				if (element.hasStyles()) {
+					element.styles = Object.assign(element.styles!, styles)
+				} else {
+					element.styles = styles
+				}
+				editor.value.domRender()
+				editor.value.rangeRender()
+				//更新工具条位置
+				setTimeout(() => {
+					emit('reset-toolbar')
+				}, 0)
+			}
+		}
+		//设置视频属性
+		const setVideo = (prop: 'controls' | 'loop' | 'autoplay' | 'muted') => {
+			const element = editor.value.range!.anchor.element
+			//当前是拥有该属性
+			if (videoConfig.value[prop]) {
+				delete element.marks![prop]
+			}
+			//当前无该属性
+			else {
+				element.marks![prop] = true
+			}
+			videoConfig.value[prop] = !videoConfig.value[prop]
+			editor.value.domRender()
+			editor.value.rangeRender()
+		}
+
+		return () => {
+			return [
+				//30%
+				h(
+					Button,
+					{
+						name: 'set30Width',
+						title: $editTrans('width30'),
+						tooltip: props.tooltip,
+						color: props.color,
+						zIndex: props.zIndex,
+						onOperate: () => setWidth('30%')
+					},
+					{
+						default: () => ' 30% '
+					}
+				),
+				//50%
+				h(
+					Button,
+					{
+						name: 'set50Width',
+						title: $editTrans('width50'),
+						tooltip: props.tooltip,
+						color: props.color,
+						zIndex: props.zIndex,
+						onOperate: () => setWidth('50%')
+					},
+					{
+						default: () => ' 50% '
+					}
+				),
+				//100%
+				h(
+					Button,
+					{
+						name: 'set100Width',
+						title: $editTrans('width100'),
+						tooltip: props.tooltip,
+						color: props.color,
+						zIndex: props.zIndex,
+						onOperate: () => setWidth('100%')
+					},
+					{
+						default: () => ' 100% '
+					}
+				),
+				//宽度自适应
+				h(
+					Button,
+					{
+						name: 'setAutoWidth',
+						title: $editTrans('auto'),
+						tooltip: props.tooltip,
+						color: props.color,
+						rightBorder: true,
+						zIndex: props.zIndex,
+						onOperate: () => setWidth('auto')
+					},
+					{
+						default: () => h(Icon, { value: 'auto-width' })
+					}
+				),
+				//自动播放
+				h(
+					Button,
+					{
+						name: 'autoplay',
+						title: videoConfig.value.autoplay ? $editTrans('disabledAutoplay') : $editTrans('autoplay'),
+						tooltip: props.tooltip,
+						color: props.color,
+						zIndex: props.zIndex,
+						onOperate: () => setVideo('autoplay')
+					},
+					{
+						default: () =>
+							h(Icon, {
+								value: videoConfig.value.autoplay ? 'autoplay' : 'stop'
+							})
+					}
+				),
+				//循环
+				h(
+					Button,
+					{
+						name: 'loop',
+						title: videoConfig.value.loop ? $editTrans('disabledLoop') : $editTrans('loop'),
+						tooltip: props.tooltip,
+						color: props.color,
+						zIndex: props.zIndex,
+						onOperate: () => setVideo('loop')
+					},
+					{
+						default: () =>
+							h(Icon, {
+								value: videoConfig.value.loop ? 'loop' : 'single'
+							})
+					}
+				),
+				//静音
+				h(
+					Button,
+					{
+						name: 'muted',
+						title: videoConfig.value.muted ? $editTrans('unmuted') : $editTrans('muted'),
+						tooltip: props.tooltip,
+						color: props.color,
+						zIndex: props.zIndex,
+						onOperate: () => setVideo('muted')
+					},
+					{
+						default: () =>
+							h(Icon, {
+								value: videoConfig.value.muted ? 'muted' : 'unmuted'
+							})
+					}
+				),
+				//控制器
+				h(
+					Button,
+					{
+						name: 'controls',
+						title: $editTrans('controls'),
+						tooltip: props.tooltip,
+						color: props.color,
+						zIndex: props.zIndex,
+						leftBorder: true,
+						onOperate: () => setVideo('controls')
+					},
+					{
+						default: () =>
+							h(Icon, {
+								value: 'controls'
+							})
+					}
+				),
+				//删除视频
+				h(
+					Button,
+					{
+						name: 'deleteVideo',
+						title: $editTrans('deleteVideo'),
+						tooltip: props.tooltip,
+						color: props.color,
+						zIndex: props.zIndex,
+						onOperate: () => {
+							const element = getMatchElementByRange(editor.value, dataRangeCaches.value, { parsedom: 'video' })
+							if (element) {
+								element.toEmpty()
+								editor.value.domRender()
+								editor.value.rangeRender()
+							}
+						}
+					},
+					{
+						default: () => h(Icon, { value: 'delete' })
+					}
+				)
+			]
+		}
+	},
+	{
+		name: `_${FEATURE_NAME}`,
+		props: {
+			color: String,
+			zIndex: Number,
+			tooltip: Boolean
+		},
+		emits: ['reset-toolbar']
+	}
+)
+
+/**
+ * 菜单栏 - 插入视频
+ */
+export const VideoMenuButton = defineComponent(
+	props => {
+		const editor = inject<Ref<AlexEditor>>('editor')!
+		const dataRangeCaches = inject<Ref<AlexElementsRangeType>>('dataRangeCaches')!
+		const $editTrans = inject<(key: string) => any>('$editTrans')!
+		const isSourceView = inject<Ref<boolean>>('isSourceView')!
+
+		const btnRef = ref<InstanceType<typeof Button> | null>(null)
+
+		return () => {
+			return props.config.show
+				? h(
+						Button,
+						{
+							ref: btnRef,
+							name: FEATURE_NAME,
+							tooltip: props.tooltip,
+							color: props.color,
+							zIndex: props.zIndex,
+							type: 'select',
+							hideScroll: true,
+							title: $editTrans('insertImage'),
+							leftBorder: props.config.leftBorder,
+							rightBorder: props.config.rightBorder,
+							active: false,
+							disabled: props.disabled || isSourceView.value || hasPreInRange(editor.value, dataRangeCaches.value) || hasMathformulaInRange(editor.value, dataRangeCaches.value) || props.config.disabled
+						},
+						{
+							default: () =>
+								h(Icon, {
+									value: 'video'
+								}),
+							layer: () =>
+								h(InsertVideo, {
+									color: props.color,
+									allowedFileType: props.config.allowedFileType,
+									multiple: props.config.multiple,
+									maxSize: props.config.maxSize,
+									minSize: props.config.minSize,
+									customUpload: props.config.customUpload,
+									handleError: props.config.handleError,
+									onChange: () => btnRef.value!.layerRef!.setPosition(),
+									onInsert: (val: string[]) => {
+										//过滤掉空的地址
+										const urls = val.filter(url => {
+											return !!url
+										})
+										//如果数组为0
+										if (urls.length == 0) {
+											return
+										}
+										//遍历每个地址进行插入
+										urls.forEach(url => {
+											insertVideo(editor.value, url)
+										})
+										editor.value.domRender()
+										editor.value.rangeRender()
+										btnRef.value!.show = false
+									}
+								})
+						}
+				  )
+				: null
+		}
+	},
+	{
+		name: `_${FEATURE_NAME}`,
+		props: {
+			color: String,
+			zIndex: Number,
+			config: Object as PropType<MenuVideoButtonType>,
+			tooltip: Boolean,
+			disabled: Boolean
+		}
+	}
+)

package/src/hljs/index.ts

@@ -29,7 +29,7 @@ import r from 'highlight.js/lib/languages/r'
 import kotlin from 'highlight.js/lib/languages/kotlin'
 import rust from 'highlight.js/lib/languages/rust'
 //引入css样式主题
-import '../css/hljs.less'
+import '@/css/hljs.less'
 //import 'highlight.js/styles/github.css'
 //import 'highlight.js/styles/atom-one-light.css'
 //import 'highlight.js/styles/lightfair.css'

package/src/index.ts

@@ -1,5 +1,17 @@
 import { App } from 'vue'
+import { AlexElement } from 'alex-editor'
 import { withInstall } from '@/core/tool'
+
+//重写AlexElement.isPreStyle，将td加入到代码块样式中去
+const originFn = AlexElement.prototype.isPreStyle
+AlexElement.prototype.isPreStyle = function () {
+	const block = this.getInblock() || this.getBlock()
+	if (block.parsedom == 'td') {
+		return true
+	}
+	return originFn.apply(this)
+}
+
 //引入根节点颜色变量样式
 import '@/css/var.less'
 //引入字体图标样式
@@ -10,40 +22,85 @@ import editify from '@/editify/editify.vue'
 const Editify = withInstall(editify)
 
 //导出类型
-export type { ButtonTypeType, ButtonOptionsItemType, ButtonSelectConfigType, ButtonDisplayConfigType } from '@/components/button/props'
-export type { InsertImageUploadErrorType } from '@/components/insertImage/props'
-export type { InsertVideoUploadErrorType } from '@/components/insertVideo/props'
-export type { MenuButtonType, MenuSelectButtonType, MenuDisplayButtonType, MenuImageButtonType, MenuVideoButtonType, MenuTableButtonType, MenuCustomButtonType, CodeBlockToolbarType, TextToolbarType, ToolbarConfigType, MenuSequenceType, MenuModeType, MenuExtendType, MenuConfigType, PluginMenuConfigType, PluginType, PluginResultType } from '@/core/tool'
-export type { ElementMatchConfigType } from '@/core/function'
+export type * from '@/components/button'
+export type * from '@/components/checkbox'
+export type * from '@/components/colors'
+export type * from '@/components/icon'
+export type * from '@/components/insertImage'
+export type * from '@/components/insertLink'
+export type * from '@/components/insertTable'
+export type * from '@/components/insertVideo'
+export type * from '@/components/layer'
+export type * from '@/components/tooltip'
+export type * from '@/components/triangle'
+export type * from '@/components/updateLink'
+export type * from '@/core/tool'
+export type * from '@/core/function'
+export type * from '@/editify/menu'
+export type * from '@/editify/toolbar'
 
 //导出编辑器操作方法
-export { elementIsMatch, getMatchElementByElement, getMatchElementByRange, isList, isTask, elementIsInList, elementIsInTask, hasPreInRange, hasQuoteInRange, hasListInRange, hasTaskInRange, hasLinkInRange, hasTableInRange, hasImageInRange, hasVideoInRange, isRangeInQuote, isRangeInList, isRangeInTask, queryTextStyle, queryTextMark, getRangeText, setIndentIncrease, setIndentDecrease, setQuote, setAlign, setList, setTask, setTextStyle, setTextMark, removeTextStyle, removeTextMark, setLineHeight, insertLink, insertImage, insertVideo, insertTable, insertCodeBlock, insertSeparator } from '@/core/function'
+export {
+	elementIsMatch,
+	getMatchElementByElement,
+	getMatchElementByRange,
+	elementIsList,
+	getListByElement,
+	hasListInRange,
+	rangeIsInList,
+	elementIsTask,
+	getTaskByElement,
+	hasTaskInRange,
+	rangeIsInTask,
+	elementIsAttachment,
+	hasAttachmentInRange,
+	elementIsMathformula,
+	getMathformulaByElement,
+	hasMathformulaInRange,
+	elementIsPanel,
+	getPanelByElement,
+	hasPanelInRange,
+	elementIsInfoBlock,
+	getInfoBlockByElement,
+	hasInfoBlockInRange,
+	rangeIsInInfoBlock,
+	hasPreInRange,
+	hasQuoteInRange,
+	hasLinkInRange,
+	hasTableInRange,
+	hasImageInRange,
+	hasVideoInRange,
+	rangeIsInQuote,
+	queryTextStyle,
+	queryTextMark,
+	getRangeText,
+	setIndentIncrease,
+	setIndentDecrease,
+	setQuote,
+	setAlign,
+	setList,
+	setTask,
+	setTextStyle,
+	setTextMark,
+	removeTextStyle,
+	removeTextMark,
+	setLineHeight,
+	insertLink,
+	insertImage,
+	insertVideo,
+	insertTable,
+	insertCodeBlock,
+	insertSeparator
+} from '@/core/function'
 
 //安装函数
 const install = (app: App) => {
 	app.component(Editify.name!, Editify)
 }
 //版本号
-const version = '0.2.14'
-
-//导出AlexElement元素
-export { AlexElement } from 'alex-editor'
-
-//导出attachment插件相关的方法和类型
-export type { AttachmentOptionsType } from '@/plugins/attachment'
-export type { InsertAttachmentUploadErrorType } from '@/plugins/attachment/insertAttachment/props'
-export { attachment, isAttachment, hasAttachmentInRange } from '@/plugins/attachment'
-//导出mathformula插件相关的方法和类型
-export type { MathformulaOptionsType } from '@/plugins/mathformula'
-export { mathformula, isMathformula, isUnderMathformula, getMathformulaElement, hasMathformulaInRange, getMathformulaElementByRange } from '@/plugins/mathformula'
-//导出panel插件相关的方法和类型
-export type { PanelOptionsType } from '@/plugins/panel'
-export { panel, isPanel, isUnderPanel, getPanelElement, hasPanelInRange, getPanelElementByRange } from '@/plugins/panel'
-//导出infoBlock插件相关的方法和类型
-export type { InfoBlockOptionsType } from '@/plugins/infoBlock'
-export { infoBlock, isInfoBlock, isUnderInfoBlock, getInfoBlockElement, hasInfoBlockInRange, getInfoBlockElementByRange } from '@/plugins/infoBlock'
+const version = '0.2.16'
 
 //导出组件和安装函数
-export { Editify as default, Editify, install, version }
+export { Editify as default, Editify, install, AlexElement, version }
 
 console.log(`%c vue-editify %c v${version} `, 'padding: 2px 1px; border-radius: 3px 0 0 3px; color: #fff; background: #606060; font-weight: bold;', 'padding: 2px 1px; border-radius: 0 3px 3px 0; color: #fff; background: #42c02e; font-weight: bold;')

package/src/locale/en_US.ts

@@ -1,4 +1,4 @@
-import { ObjectType } from '../core/tool'
+import { ObjectType } from '@/core/tool'
 
 export const en_US: ObjectType = {
 	textWrapUp: 'Up feed',
@@ -49,8 +49,8 @@ export const en_US: ObjectType = {
 	strikethrough: 'Strikethrough',
 	underline: 'Underline',
 	code: 'Inline code',
-	superscript: 'Superscript',
-	subscript: 'Subscript',
+	super: 'Superscript',
+	sub: 'Subscript',
 	fontSize: 'Font size',
 	fontFamily: 'Font family',
 	defaultFontFamily: 'Default',

package/src/locale/zh_CN.ts

@@ -1,4 +1,4 @@
-import { ObjectType } from '../core/tool'
+import { ObjectType } from '@/core/tool'
 
 export const zh_CN: ObjectType = {
 	textWrapUp: '向上换行',
@@ -49,8 +49,8 @@ export const zh_CN: ObjectType = {
 	strikethrough: '删除线',
 	underline: '下划线',
 	code: '行内代码',
-	superscript: '上标',
-	subscript: '下标',
+	super: '上标',
+	sub: '下标',
 	fontSize: '字号',
 	fontFamily: '字体',
 	defaultFontFamily: '默认字体',

package/lib/plugins/attachment/index.d.ts

@@ -1,37 +0,0 @@
-import { AlexEditor, AlexElement, AlexElementsRangeType } from 'alex-editor';
-import { PluginType } from '../../core/tool';
-import { InsertAttachmentUploadErrorType } from './insertAttachment/props';
-
-export type AttachmentOptionsType = {
-    sequence?: number;
-    title?: string;
-    leftBorder?: boolean;
-    rightBorder?: boolean;
-    disabled?: boolean;
-    accept?: string;
-    allowedFileType?: string[];
-    multiple?: boolean;
-    maxSize?: number;
-    minSize?: number;
-    customUpload?: ((files: File[]) => string[]) | ((files: File[]) => Promise<string[]>);
-    handleError?: (error: InsertAttachmentUploadErrorType, file: File) => void;
-};
-/**
- * 元素是否附件
- * @param element
- * @returns
- */
-export declare const isAttachment: (element: AlexElement) => any;
-/**
- * 选区是否含有附件
- * @param editor
- * @param dataRangeCaches
- * @returns
- */
-export declare const hasAttachmentInRange: (editor: AlexEditor, dataRangeCaches: AlexElementsRangeType) => any;
-/**
- * 附件插件
- * @param options
- * @returns
- */
-export declare const attachment: (options?: AttachmentOptionsType) => PluginType;

package/lib/plugins/infoBlock/index.d.ts

@@ -1,55 +0,0 @@
-import { AlexEditor, AlexElement, AlexElementsRangeType } from 'alex-editor';
-import { PluginType } from '../../core/tool';
-
-export type InfoBlockOptionsType = {
-    sequence?: number;
-    title?: string;
-    leftBorder?: boolean;
-    rightBorder?: boolean;
-    disabled?: boolean;
-};
-/**
- * 是否信息元素
- * @param el
- * @returns
- */
-export declare const isInfoBlock: (el: AlexElement) => any;
-/**
- * 判断某个元素是否在信息元素内
- * @param el
- * @returns
- */
-export declare const isUnderInfoBlock: (el: AlexElement) => boolean;
-/**
- * 根据某个元素获取所在的信息元素，如果不在信息元素内则返回null
- * @param el
- * @returns
- */
-export declare const getInfoBlockElement: (el: AlexElement) => AlexElement | null;
-/**
- * 选区是否含有信息元素
- * @param editor
- * @param dataRangeCaches
- * @returns
- */
-export declare const hasInfoBlockInRange: (editor: AlexEditor, dataRangeCaches: AlexElementsRangeType) => boolean;
-/**
- * 选区是否都在信息块内
- * @param editor
- * @param dataRangeCaches
- * @returns
- */
-export declare const isRangeInInfoBlock: (editor: AlexEditor, dataRangeCaches: AlexElementsRangeType) => boolean;
-/**
- * 选区是否在某个信息元素下，如果是返回该信息元素否则返回null
- * @param editor
- * @param dataRangeCaches
- * @returns
- */
-export declare const getInfoBlockElementByRange: (editor: AlexEditor, dataRangeCaches: AlexElementsRangeType) => AlexElement | null;
-/**
- * 信息插件
- * @param options
- * @returns
- */
-export declare const infoBlock: (options?: InfoBlockOptionsType) => PluginType;

package/lib/plugins/mathformula/index.d.ts

@@ -1,49 +0,0 @@
-import { AlexEditor, AlexElement, AlexElementsRangeType } from 'alex-editor';
-import { PluginType } from '../../core/tool';
-
-export type MathformulaOptionsType = {
-    sequence?: number;
-    title?: string;
-    leftBorder?: boolean;
-    rightBorder?: boolean;
-    disabled?: boolean;
-    handleError?: (error: Error) => void;
-};
-/**
- * 是否公式元素
- * @param el
- * @returns
- */
-export declare const isMathformula: (el: AlexElement) => any;
-/**
- * 判断某个元素是否在公式元素内
- * @param el
- * @returns
- */
-export declare const isUnderMathformula: (el: AlexElement) => boolean;
-/**
- * 根据某个元素获取所在的公式元素，如果不在公式元素内则返回null
- * @param el
- * @returns
- */
-export declare const getMathformulaElement: (el: AlexElement) => AlexElement | null;
-/**
- * 选区是否含有公式元素
- * @param editor
- * @param dataRangeCaches
- * @returns
- */
-export declare const hasMathformulaInRange: (editor: AlexEditor, dataRangeCaches: AlexElementsRangeType) => boolean;
-/**
- * 选区是否在某个公式元素下，如果是返回该公式元素否则返回null
- * @param editor
- * @param dataRangeCaches
- * @returns
- */
-export declare const getMathformulaElementByRange: (editor: AlexEditor, dataRangeCaches: AlexElementsRangeType) => AlexElement | null;
-/**
- * 数学公式插件
- * @param options
- * @returns
- */
-export declare const mathformula: (options?: MathformulaOptionsType) => PluginType;

package/lib/plugins/panel/index.d.ts

@@ -1,48 +0,0 @@
-import { AlexEditor, AlexElement, AlexElementsRangeType } from 'alex-editor';
-import { PluginType } from '../../core/tool';
-
-export type PanelOptionsType = {
-    sequence?: number;
-    title?: string;
-    leftBorder?: boolean;
-    rightBorder?: boolean;
-    disabled?: boolean;
-};
-/**
- * 是否面板元素
- * @param el
- * @returns
- */
-export declare const isPanel: (el: AlexElement) => any;
-/**
- * 判断某个元素是否在面板元素内
- * @param el
- * @returns
- */
-export declare const isUnderPanel: (el: AlexElement) => boolean;
-/**
- * 根据某个元素获取所在的面板元素，如果不在面板元素内则返回null
- * @param el
- * @returns
- */
-export declare const getPanelElement: (el: AlexElement) => AlexElement | null;
-/**
- * 选区是否含有面板元素
- * @param editor
- * @param dataRangeCaches
- * @returns
- */
-export declare const hasPanelInRange: (editor: AlexEditor, dataRangeCaches: AlexElementsRangeType) => boolean;
-/**
- * 选区是否在某个面板元素下，如果是返回该面板元素否则返回null
- * @param editor
- * @param dataRangeCaches
- * @returns
- */
-export declare const getPanelElementByRange: (editor: AlexEditor, dataRangeCaches: AlexElementsRangeType) => AlexElement | null;
-/**
- * 面板插件
- * @param options
- * @returns
- */
-export declare const panel: (options?: PanelOptionsType) => PluginType;