vue-editify 0.1.20 → 0.1.22

package/src/components/tooltip/tooltip.less

@@ -13,7 +13,7 @@
 		white-space: nowrap;
 	}
 
-	&.block {
+	&.editify-block {
 		display: block;
 
 		.editify-tooltip-target {

package/src/components/tooltip/tooltip.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="editify-tooltip" :class="{ block: block }">
+	<div class="editify-tooltip" :class="{ 'editify-block': block }">
 		<div ref="targetRef" class="editify-tooltip-target" @mouseenter="showContent" @mouseleave="hideContent">
 			<slot></slot>
 		</div>

package/src/core/tool.ts

@@ -4,7 +4,7 @@ import { AlexElement } from 'alex-editor'
 import { ButtonOptionsItemType, ButtonTypeType } from '../components/button/props'
 import { LocaleType } from '../locale'
 import { InsertImageUploadErrorType } from '../components/insertImage/props'
-import { Slot } from 'vue'
+import { VNode } from 'vue'
 import Button from '../components/button/button.vue'
 
 export type ObjectType = {
@@ -62,7 +62,7 @@ export interface MenuTableButtonType extends MenuButtonType {
 }
 
 export type MenuCustomButtonType = {
-	type: ButtonTypeType
+	type?: ButtonTypeType
 	title?: string
 	leftBorder?: boolean
 	rightBorder?: boolean
@@ -77,9 +77,9 @@ export type MenuCustomButtonType = {
 	onLayerShown?: (name: string, btnInstance: InstanceType<typeof Button>) => void
 	onLayerHidden?: (name: string, btnInstance: InstanceType<typeof Button>) => void
 	onOperate?: (name: string, value: string | number | undefined, btnInstance: InstanceType<typeof Button>) => void
-	default?: Slot
-	layer?: Slot
-	option?: Slot
+	default?: () => VNode
+	layer?: () => VNode
+	option?: () => VNode
 }
 
 export type CodeBlockToolbarType = {
@@ -117,36 +117,36 @@ export type ToolbarConfigType = {
 }
 
 export type MenuSequenceType = {
-	[key: string]: number
-	undo: number
-	redo: number
-	heading: number
-	indent: number
-	quote: number
-	align: number
-	orderList: number
-	unorderList: number
-	task: number
-	bold: number
-	underline: number
-	italic: number
-	strikethrough: number
-	code: number
-	super: number
-	sub: number
-	formatClear: number
-	fontSize: number
-	fontFamily: number
-	lineHeight: number
-	foreColor: number
-	backColor: number
-	link: number
-	image: number
-	video: number
-	table: number
-	codeBlock: number
-	sourceView: number
-	fullScreen: number
+	[key: string]: number | undefined
+	undo?: number
+	redo?: number
+	heading?: number
+	indent?: number
+	quote?: number
+	align?: number
+	orderList?: number
+	unorderList?: number
+	task?: number
+	bold?: number
+	underline?: number
+	italic?: number
+	strikethrough?: number
+	code?: number
+	super?: number
+	sub?: number
+	formatClear?: number
+	fontSize?: number
+	fontFamily?: number
+	lineHeight?: number
+	foreColor?: number
+	backColor?: number
+	link?: number
+	image?: number
+	video?: number
+	table?: number
+	codeBlock?: number
+	sourceView?: number
+	fullScreen?: number
 }
 
 export type MenuModeType = 'default' | 'inner' | 'fixed'

package/src/editify/editify.less

@@ -19,7 +19,7 @@
 		outline: none;
 	}
 
-	&.fullscreen {
+	&.editify-fullscreen {
 		position: fixed;
 		z-index: 1000;
 		left: 0;
@@ -33,7 +33,7 @@
 		}
 	}
 
-	&.autoheight {
+	&.editify-autoheight {
 		height: auto;
 
 		.editify-body {
@@ -53,20 +53,20 @@
 	padding: 1px;
 	border-radius: 4px;
 
-	&.border {
+	&.editify-border {
 		border: 1px solid @border-color;
 		transition: all 500ms;
 
-		&.menu_inner {
+		&.editify-menu_inner {
 			border-top: none;
 			border-radius: 0 0 4px 4px;
 		}
 	}
 
-	&.menu_inner {
+	&.editify-menu_inner {
 		padding-top: 21px;
 
-		.editify-source {
+		.editify-sourceview {
 			top: 21px;
 			height: calc(100% - 21px);
 		}
@@ -89,7 +89,7 @@
 		line-height: 1.5;
 
 		//显示占位符
-		&.placeholder::before {
+		&.editify-placeholder::before {
 			position: absolute;
 			top: 0;
 			left: 0;
@@ -343,9 +343,10 @@
 		}
 
 		//禁用样式
-		&.disabled {
+		&.editify-disabled {
 			cursor: auto !important;
-			&.placeholder::before {
+
+			&.editify-placeholder::before {
 				cursor: auto;
 			}
 			:deep(a) {
@@ -361,7 +362,7 @@
 	}
 
 	//代码视图
-	.editify-source {
+	.editify-sourceview {
 		display: block;
 		width: 100%;
 		height: 100%;
@@ -398,7 +399,7 @@
 	}
 
 	//全屏模式下并且不是代码视图下，显示一个上边框
-	&.fullscreen {
+	&.editify-fullscreen {
 		border-top: 1px solid @border-color;
 	}
 }

package/src/editify/editify.vue

@@ -1,18 +1,18 @@
 <template>
-	<div class="editify" :class="{ fullscreen: isFullScreen, autoheight: !isFullScreen && autoheight }" ref="elRef">
+	<div class="editify" :class="{ 'editify-fullscreen': isFullScreen, 'editify-autoheight': !isFullScreen && autoheight }" ref="elRef">
 		<!-- 菜单区域 -->
 		<Menu v-if="menuConfig.use" :config="menuConfig" :color="color" ref="menuRef"></Menu>
 		<!-- 编辑层，与编辑区域宽高相同必须适配 -->
-		<div ref="bodyRef" class="editify-body" :class="{ border: showBorder, menu_inner: menuConfig.use && menuConfig.mode == 'inner' }" :data-editify-uid="instance.uid">
+		<div ref="bodyRef" class="editify-body" :class="{ 'editify-border': showBorder, 'editify-menu_inner': menuConfig.use && menuConfig.mode == 'inner' }" :data-editify-uid="instance.uid">
 			<!-- 编辑器 -->
-			<div ref="contentRef" class="editify-content" :class="{ placeholder: showPlaceholder, disabled: disabled }" @keydown="handleEditorKeydown" @click="handleEditorClick" @compositionstart="isInputChinese = true" @compositionend="isInputChinese = false" :data-editify-placeholder="placeholder"></div>
+			<div ref="contentRef" class="editify-content" :class="{ 'editify-placeholder': showPlaceholder, 'editify-disabled': disabled }" @keydown="handleEditorKeydown" @click="handleEditorClick" @compositionstart="isInputChinese = true" @compositionend="isInputChinese = false" :data-editify-placeholder="placeholder"></div>
 			<!-- 代码视图 -->
-			<textarea v-if="isSourceView" :value="value" readonly class="editify-source" />
+			<textarea v-if="isSourceView" :value="value" readonly class="editify-sourceview" />
 			<!-- 工具条 -->
 			<Toolbar ref="toolbarRef" v-model="toolbarOptions.show" :node="toolbarOptions.node!" :type="toolbarOptions.type" :config="toolbarConfig" :color="color"></Toolbar>
 		</div>
 		<!-- 编辑器尾部 -->
-		<div v-if="showWordLength" class="editify-footer" :class="{ fullscreen: isFullScreen && !isSourceView }" ref="footerRef">
+		<div v-if="showWordLength" class="editify-footer" :class="{ 'editify-fullscreen': isFullScreen && !isSourceView }" ref="footerRef">
 			<!-- 字数统计 -->
 			<div class="editify-footer-words">{{ $editTrans('totalWordCount') }}{{ textValue.length }}</div>
 		</div>

package/src/index.ts

@@ -1,32 +1,28 @@
-//引入AlexElement
-import { AlexElement } from 'alex-editor'
+import { App, FunctionPlugin } from 'vue'
+//引入字体图标样式
+import './icon/iconfont.css'
 //引入组件
 import Editify from './editify/editify.vue'
-//引入图标样式
-import './icon/iconfont.css'
 
-import { App } from 'vue'
-import { ButtonTypeType, ButtonOptionsItemType, ButtonSelectConfigType, ButtonDisplayConfigType } from './components/button/props'
-import { MenuButtonType, MenuSelectButtonType, MenuDisplayButtonType, MenuImageButtonType, MenuVideoButtonType, MenuTableButtonType, MenuCustomButtonType, CodeBlockToolbarType, TextToolbarType, ToolbarConfigType, MenuSequenceType, MenuModeType, MenuConfigType } from './core/tool'
-import { InsertImageUploadErrorType } from './components/insertImage/props'
-import { InsertVideoUploadErrorType } from './components/insertVideo/props'
+//导出类型
+export type { ButtonTypeType, ButtonOptionsItemType, ButtonSelectConfigType, ButtonDisplayConfigType } from './components/button/props'
+export type { MenuButtonType, MenuSelectButtonType, MenuDisplayButtonType, MenuImageButtonType, MenuVideoButtonType, MenuTableButtonType, MenuCustomButtonType, CodeBlockToolbarType, TextToolbarType, ToolbarConfigType, MenuSequenceType, MenuModeType, MenuConfigType } from './core/tool'
+export type { InsertImageUploadErrorType } from './components/insertImage/props'
+export type { InsertVideoUploadErrorType } from './components/insertVideo/props'
+
+//导出编辑器操作方法
+export { getParsedomElementByElement, getCurrentParsedomElement, elementIsInList, elementIsInTask, isList, isTask, hasPreInRange, isRangeInPre, hasQuoteInRange, isRangeInQuote, hasListInRange, isRangeInList, hasTaskInRange, isRangeInTask, hasLinkInRange, hasTableInRange, hasImageInRange, hasVideoInRange, queryTextStyle, queryTextMark, getRangeText, setIndentIncrease, setIndentDecrease, setQuote, setAlign, setList, setTask, setTextStyle, setTextMark, removeTextStyle, removeTextMark, setLineHeight, insertLink, insertImage, insertVideo, insertTable, insertCodeBlock } from './core/function'
+
+//导出AlexElement元素
+export { AlexElement } from 'alex-editor'
+
+//导出版本号
+export const version = '0.1.22'
 
-//版本号
-const version = '0.1.20'
 //安装函数
-const install = (app: App) => {
+const install: FunctionPlugin = (app: App) => {
 	app.component(Editify.name!, Editify)
 }
-//全局导出的对象
-const stdin_default = {
-	install,
-	version
-}
-
-//导出一些编辑器操作方法
-export * from './core/function'
-
-//导出类型
-export type { ButtonTypeType, ButtonOptionsItemType, ButtonSelectConfigType, ButtonDisplayConfigType, MenuButtonType, MenuSelectButtonType, MenuDisplayButtonType, MenuImageButtonType, MenuVideoButtonType, MenuTableButtonType, MenuCustomButtonType, CodeBlockToolbarType, TextToolbarType, ToolbarConfigType, MenuSequenceType, MenuModeType, MenuConfigType, InsertImageUploadErrorType, InsertVideoUploadErrorType }
 
-export { stdin_default as default, install, version, Editify, AlexElement }
+//导出组件和安装函数
+export { install as default, install, Editify }