md-editor-v3 - npm Package Compare versions

Comparing version 2.5.0-beta.0 to 2.5.0-beta.1

lib/MdEditor/type.d.ts

@@ -241,3 +241,3 @@ import { marked, Renderer, Slugger } from 'marked';
 }
-export declare type UpdateSetting = (v: boolean | undefined, k: keyof SettingType) => void;
+export declare type UpdateSetting = (k: keyof SettingType, v?: boolean) => void;
 export declare type ChangeEvent = (v: string) => void;
@@ -256,3 +256,3 @@ export declare type SaveEvent = (v: string, h: Promise<string>) => void;
 }
-export declare type InsertContentGenerator = (selectedText: string) => {
+export interface InsertParam {
     targetValue: string;
@@ -262,3 +262,4 @@ select: boolean;
     deviationEnd: number;
-};
+}
+export declare type InsertContentGenerator = (selectedText: string) => InsertParam;
 export interface ExposeParam {
@@ -316,4 +317,4 @@ /**
      * select         插入后是否自动选中内容
-     * deviationStart 插入后选中内容鼠标开始位置
-     * deviationEnd   插入后选中内容鼠标结束位置
+     * deviationStart 插入后选中位置的开始偏移量
+     * deviationEnd   插入后选中位置的结束偏移量
      *
@@ -320,0 +321,0 @@ */

package.json

 {
   "name": "md-editor-v3",
-  "version": "2.5.0-beta.0",
+  "version": "2.5.0-beta.1",
   "keywords": [
@@ -53,5 +53,4 @@ "vue",
     "@types/marked": "^4.0.7",
-    "@types/mermaid": "^8.2.9",
     "@types/node": "16",
-    "@types/prettier": "^2.6.3",
+    "@types/prettier": "^2.7.1",
     "@typescript-eslint/eslint-plugin": "^5.23.0",
@@ -65,15 +64,15 @@ "@typescript-eslint/parser": "^5.23.0",
     "copy-to-clipboard": "^3.3.1",
-    "cropperjs": "^1.5.12",
+    "cropperjs": "^1.5.13",
     "eslint": "^8.15.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-prettier": "^4.0.0",
-    "highlight.js": "^11.0.1",
-    "katex": "^0.15.1",
+    "highlight.js": "^11.7.0",
+    "katex": "^0.16.3",
     "less": "^4.1.1",
-    "marked": "^4.0.15",
-    "medium-zoom": "^1.0.6",
-    "mermaid": "^9.1.0",
+    "marked": "^4.2.3",
+    "medium-zoom": "^1.0.8",
+    "mermaid": "^9.2.2",
     "multiparty": "^4.2.2",
-    "prettier": "^2.3.2",
-    "screenfull": "^6.0.1",
+    "prettier": "^2.8.0",
+    "screenfull": "^6.0.2",
     "ts-morph": "^14.0.0",
@@ -80,0 +79,0 @@ "typescript": "^4.6.4",

README.md

@@ -1,2 +0,2 @@
-# md-editor-v3
+# 🎄 md-editor-v3
 
@@ -15,3 +15,3 @@ ![](https://img.shields.io/github/package-json/v/imzbf/md-editor-v3) ![](https://img.shields.io/npm/dm/md-editor-v3) ![](https://img.shields.io/bundlephobia/min/md-editor-v3) ![](https://img.shields.io/github/license/imzbf/md-editor-v3) ![](https://img.shields.io/badge/ssr-%3E1.6.0-brightgreen)
 
-## Features
+## ⭐️ Features
 
@@ -29,3 +29,3 @@ - Toolbar, screenfull or screenfull in web pages and so on.
 
-## Install
+## 📦 Install
 
@@ -50,3 +50,3 @@ ```shell
 
-## Usage
+## 💡 Usage
 
@@ -67,3 +67,3 @@ ```vue
 
-## Preview
+## 🗺 Preview
 
@@ -78,5 +78,5 @@ | Default theme | Dark theme | Preview only |
 
-## Apis
+## 🎁 Apis
 
-### Props
+### 🔩 Props
 
@@ -263,4 +263,138 @@ | name | type | default | description |
 
-### Slots
+## 🤱🏼 Expose
 
+After 2.5.0, Editor exposes several methods on the instance, used to get or change the internal status of the editor.
+
+```vue
+<template>
+  <md-editor ref="editorRef" />
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import MdEditor from 'md-editor-v3';
+import type { ExposeParam } from 'md-editor-v3';
+
+import 'md-editor-v3/lib/style.css';
+
+const editorRef = ref<ExposeParam>();
+
+onMounted(() => {
+  editorRef.value?.on('catalog', console.log);
+
+  editorRef.value?.toggleCatalog(true);
+});
+</script>
+```
+
+> Switched to the opposite status, if toggle without input parameter.
+
+### 👂🏼 on
+
+Get the internal state of the editor, including pageFullscreen, fullscreen, preview, htmlPreview, catalog, etc.
+
+- pageFullscreen
+
+  ```js
+  editorRef.value?.on('pageFullscreen', (status) => console.log(status));
+  ```
+
+- fullscreen
+
+  ```js
+  editorRef.value?.on('fullscreen', (status) => console.log(status));
+  ```
+
+- preview
+
+  ```js
+  editorRef.value?.on('preview', (status) => console.log(status));
+  ```
+
+- htmlPreview
+
+  ```js
+  editorRef.value?.on('htmlPreview', (status) => console.log(status));
+  ```
+
+- catalog
+
+  ```js
+  editorRef.value?.on('catalog', (status) => console.log(status));
+  ```
+
+### 💻 togglePageFullscreen
+
+Toggle status of fullscreen within the page.
+
+```js
+editorRef.value?.togglePageFullscreen(true);
+```
+
+### 🖥 toggleFullscreen
+
+Toggle status of fullscreen widthin browser.
+
+```js
+editorRef.value?.toggleFullscreen(true);
+```
+
+### 📖 togglePreview
+
+Toggle status of preview.
+
+```js
+editorRef.value?.togglePreview(true);
+```
+
+### 📼 toggleHtmlPreview
+
+Toggle status of htmlPreview.
+
+```js
+editorRef.value?.toggleHtmlPreview(true);
+```
+
+### 🧬 toggleCatalog
+
+Toggle status of catalog.
+
+```js
+editorRef.value?.toggleCatalog(true);
+```
+
+### 💾 triggerSave
+
+```js
+editorRef.value?.triggerSave();
+```
+
+### 💉 insert
+
+Manually insert content into textarea.
+
+```js
+/**
+ * @params selectedText
+ */
+editorRef.value?.insert((selectedText) => {
+  /**
+   * @return targetValue    Content to be inserted
+   * @return select         Automatically select content
+   * @return deviationStart Start position of the selected content
+   * @return deviationEnd   End position of the selected content
+   */
+  return {
+    targetValue: `${selectedText}`,
+    select: true,
+    deviationStart: 0,
+    deviationEnd: 0
+  };
+});
+```
+
+For more examples, refer to source code of [extension component](https://github.com/imzbf/md-editor-v3/blob/dev-docs/src/components/MarkExtension/index.vue)
+
+### 🎍 Slots
+
 | name | type | default | description |
@@ -299,3 +433,3 @@ | --- | --- | --- | --- |
 
-### Events
+### 🪢 Events
 
@@ -311,3 +445,3 @@ | name | param | description |
 
-## Config
+## 💴 Config
 
@@ -433,3 +567,3 @@ Use `MdEditor.config(option: ConfigOption)` to reconfigure `renderer`.
 
-## Shortcut Key
+## 🪡 Shortcut Key
 
@@ -463,7 +597,7 @@ | key | function | description |
 
-## Components
+## 🪤 Components
 
 They are used as attributes of the editor component, eg: `Editor.DropdownToolbar`. For more examples, refer to [document](https://imzbf.github.io/md-editor-v3).
 
-### NormalToolbar
+### 🐣 NormalToolbar
 
@@ -484,3 +618,3 @@ `Editor.NormalToolbar`
 
-### DropdownToolbar
+### 🐼 DropdownToolbar
 
@@ -503,3 +637,3 @@ `Editor.DropdownToolbar`
 
-### ModalToolbar
+### 🦉 ModalToolbar
 
@@ -529,3 +663,3 @@ `Editor.ModalToolbar`
 
-### MdCatalog
+### 🐻 MdCatalog
 
@@ -547,5 +681,5 @@ `Editor.MdCatalog`
 
-## Examples
+## 🗂 Examples
 
-### Jsx Template
+### 🎸 Jsx Template
 
@@ -569,3 +703,3 @@ ```js
 
-### Upload Picture
+### 🥹 Upload Picture
 
@@ -610,3 +744,3 @@ > Tips: When you paste and upload GIF, it will upload a static picture. So you should upload it by file system!
 
-### Change Styles
+### 🧙‍♂️ Change Styles
 
@@ -613,0 +747,0 @@ ```less

No alert changes

Improved metrics

Total package byte prevSize

492689

increased by0.87%

Dev dependency count

33

decreased by-2.94%

Lines of code

9492

increased by0.12%

Number of lines in readme file

764

increased by21.27%

No dependency changes