@whletsgo/editor 0.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/dist/cjs/HaoRichEditor/index.d.ts +9 -0
- package/dist/cjs/HaoRichEditor/index.js +80 -0
- package/dist/cjs/HaoRichEditor/index.styled.d.ts +5 -0
- package/dist/cjs/HaoRichEditor/index.styled.js +55 -0
- package/dist/cjs/components/menu-bar/index.d.ts +6 -0
- package/dist/cjs/components/menu-bar/index.js +340 -0
- package/dist/cjs/components/menu-bar/index.styled.d.ts +8 -0
- package/dist/cjs/components/menu-bar/index.styled.js +92 -0
- package/dist/cjs/extensions/video/index.d.ts +24 -0
- package/dist/cjs/extensions/video/index.js +116 -0
- package/dist/cjs/index.d.ts +2 -0
- package/dist/cjs/index.js +41 -0
- package/dist/esm/HaoRichEditor/index.d.ts +9 -0
- package/dist/esm/HaoRichEditor/index.js +50 -0
- package/dist/esm/HaoRichEditor/index.styled.d.ts +5 -0
- package/dist/esm/HaoRichEditor/index.styled.js +10 -0
- package/dist/esm/components/menu-bar/index.d.ts +6 -0
- package/dist/esm/components/menu-bar/index.js +362 -0
- package/dist/esm/components/menu-bar/index.styled.d.ts +8 -0
- package/dist/esm/components/menu-bar/index.styled.js +31 -0
- package/dist/esm/extensions/video/index.d.ts +24 -0
- package/dist/esm/extensions/video/index.js +129 -0
- package/dist/esm/index.d.ts +2 -0
- package/dist/esm/index.js +2 -0
- package/package.json +39 -0
|
@@ -0,0 +1,116 @@
|
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
3
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
4
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
5
|
+
var __export = (target, all) => {
|
|
6
|
+
for (var name in all)
|
|
7
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
8
|
+
};
|
|
9
|
+
var __copyProps = (to, from, except, desc) => {
|
|
10
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
11
|
+
for (let key of __getOwnPropNames(from))
|
|
12
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
13
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
14
|
+
}
|
|
15
|
+
return to;
|
|
16
|
+
};
|
|
17
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
18
|
+
|
|
19
|
+
// src/extensions/video/index.ts
|
|
20
|
+
var video_exports = {};
|
|
21
|
+
__export(video_exports, {
|
|
22
|
+
Video: () => Video
|
|
23
|
+
});
|
|
24
|
+
module.exports = __toCommonJS(video_exports);
|
|
25
|
+
var import_core = require("@tiptap/core");
|
|
26
|
+
var Video = import_core.Node.create({
|
|
27
|
+
name: "video",
|
|
28
|
+
group: "block",
|
|
29
|
+
atom: true,
|
|
30
|
+
selectable: true,
|
|
31
|
+
draggable: true,
|
|
32
|
+
addOptions() {
|
|
33
|
+
return {
|
|
34
|
+
HTMLAttributes: {}
|
|
35
|
+
};
|
|
36
|
+
},
|
|
37
|
+
addAttributes() {
|
|
38
|
+
return {
|
|
39
|
+
src: {
|
|
40
|
+
default: null,
|
|
41
|
+
parseHTML: (element) => {
|
|
42
|
+
var _a;
|
|
43
|
+
return element.getAttribute("src") || ((_a = element.querySelector("source")) == null ? void 0 : _a.getAttribute("src"));
|
|
44
|
+
}
|
|
45
|
+
},
|
|
46
|
+
controls: {
|
|
47
|
+
default: true,
|
|
48
|
+
parseHTML: (element) => element.hasAttribute("controls"),
|
|
49
|
+
renderHTML: (attributes) => attributes.controls ? { controls: "" } : {}
|
|
50
|
+
},
|
|
51
|
+
autoplay: {
|
|
52
|
+
default: false,
|
|
53
|
+
parseHTML: (element) => element.hasAttribute("autoplay"),
|
|
54
|
+
renderHTML: (attributes) => attributes.autoplay ? { autoplay: "" } : {}
|
|
55
|
+
},
|
|
56
|
+
loop: {
|
|
57
|
+
default: false,
|
|
58
|
+
parseHTML: (element) => element.hasAttribute("loop"),
|
|
59
|
+
renderHTML: (attributes) => attributes.loop ? { loop: "" } : {}
|
|
60
|
+
},
|
|
61
|
+
muted: {
|
|
62
|
+
default: false,
|
|
63
|
+
parseHTML: (element) => element.hasAttribute("muted"),
|
|
64
|
+
renderHTML: (attributes) => attributes.muted ? { muted: "" } : {}
|
|
65
|
+
},
|
|
66
|
+
playsInline: {
|
|
67
|
+
default: true,
|
|
68
|
+
parseHTML: (element) => element.hasAttribute("playsinline"),
|
|
69
|
+
renderHTML: (attributes) => attributes.playsInline ? { playsinline: "" } : {}
|
|
70
|
+
},
|
|
71
|
+
poster: {
|
|
72
|
+
default: null,
|
|
73
|
+
parseHTML: (element) => element.getAttribute("poster")
|
|
74
|
+
},
|
|
75
|
+
preload: {
|
|
76
|
+
default: "metadata",
|
|
77
|
+
parseHTML: (element) => element.getAttribute("preload")
|
|
78
|
+
},
|
|
79
|
+
width: {
|
|
80
|
+
default: null,
|
|
81
|
+
parseHTML: (element) => element.getAttribute("width")
|
|
82
|
+
},
|
|
83
|
+
height: {
|
|
84
|
+
default: null,
|
|
85
|
+
parseHTML: (element) => element.getAttribute("height")
|
|
86
|
+
}
|
|
87
|
+
};
|
|
88
|
+
},
|
|
89
|
+
parseHTML() {
|
|
90
|
+
return [
|
|
91
|
+
{
|
|
92
|
+
tag: "video"
|
|
93
|
+
}
|
|
94
|
+
];
|
|
95
|
+
},
|
|
96
|
+
renderHTML({ HTMLAttributes }) {
|
|
97
|
+
return ["video", (0, import_core.mergeAttributes)(this.options.HTMLAttributes, HTMLAttributes)];
|
|
98
|
+
},
|
|
99
|
+
addCommands() {
|
|
100
|
+
return {
|
|
101
|
+
setVideo: (options) => ({ commands }) => {
|
|
102
|
+
if (!(options == null ? void 0 : options.src)) {
|
|
103
|
+
return false;
|
|
104
|
+
}
|
|
105
|
+
return commands.insertContent({
|
|
106
|
+
type: this.name,
|
|
107
|
+
attrs: options
|
|
108
|
+
});
|
|
109
|
+
}
|
|
110
|
+
};
|
|
111
|
+
}
|
|
112
|
+
});
|
|
113
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
114
|
+
0 && (module.exports = {
|
|
115
|
+
Video
|
|
116
|
+
});
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
var __create = Object.create;
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
6
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
+
var __export = (target, all) => {
|
|
8
|
+
for (var name in all)
|
|
9
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
10
|
+
};
|
|
11
|
+
var __copyProps = (to, from, except, desc) => {
|
|
12
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
13
|
+
for (let key of __getOwnPropNames(from))
|
|
14
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
15
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
16
|
+
}
|
|
17
|
+
return to;
|
|
18
|
+
};
|
|
19
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
20
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
21
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
22
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
23
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
24
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
25
|
+
mod
|
|
26
|
+
));
|
|
27
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
28
|
+
|
|
29
|
+
// src/index.ts
|
|
30
|
+
var src_exports = {};
|
|
31
|
+
__export(src_exports, {
|
|
32
|
+
HaoRichEditor: () => import_HaoRichEditor2.default,
|
|
33
|
+
default: () => import_HaoRichEditor.default
|
|
34
|
+
});
|
|
35
|
+
module.exports = __toCommonJS(src_exports);
|
|
36
|
+
var import_HaoRichEditor = __toESM(require("./HaoRichEditor"));
|
|
37
|
+
var import_HaoRichEditor2 = __toESM(require("./HaoRichEditor"));
|
|
38
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
39
|
+
0 && (module.exports = {
|
|
40
|
+
HaoRichEditor
|
|
41
|
+
});
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { FC } from 'react';
|
|
2
|
+
interface HaoRichEditorProps {
|
|
3
|
+
value?: string;
|
|
4
|
+
onChange?: (value: string) => void;
|
|
5
|
+
onUploadImage?: (file: File) => Promise<string>;
|
|
6
|
+
onUploadVideo?: (file: File) => Promise<string>;
|
|
7
|
+
}
|
|
8
|
+
declare const HaoRichEditor: FC<HaoRichEditorProps>;
|
|
9
|
+
export default HaoRichEditor;
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
import React, { useEffect, useMemo } from 'react';
|
|
2
|
+
import { TextStyleKit, TextStyle, Color, LineHeight } from '@tiptap/extension-text-style';
|
|
3
|
+
import { EditorContext, useEditor } from '@tiptap/react';
|
|
4
|
+
import StarterKit from '@tiptap/starter-kit';
|
|
5
|
+
import Image from '@tiptap/extension-image';
|
|
6
|
+
import TextAlign from '@tiptap/extension-text-align';
|
|
7
|
+
import MenuBar from "../components/menu-bar";
|
|
8
|
+
import { Video } from "../extensions/video";
|
|
9
|
+
import { HaoRichEditorContainer, HaoRichEditorContent } from "./index.styled";
|
|
10
|
+
var extensions = [TextStyleKit, StarterKit, Image, TextStyle, Color, LineHeight, Video, TextAlign.configure({
|
|
11
|
+
types: ['heading', 'paragraph'],
|
|
12
|
+
alignments: ['left', 'center', 'right'],
|
|
13
|
+
defaultAlignment: 'left'
|
|
14
|
+
})];
|
|
15
|
+
var HaoRichEditor = function HaoRichEditor(_ref) {
|
|
16
|
+
var value = _ref.value,
|
|
17
|
+
onChange = _ref.onChange,
|
|
18
|
+
onUploadImage = _ref.onUploadImage,
|
|
19
|
+
onUploadVideo = _ref.onUploadVideo;
|
|
20
|
+
var editor = useEditor({
|
|
21
|
+
extensions: extensions,
|
|
22
|
+
content: value,
|
|
23
|
+
onUpdate: function onUpdate(_ref2) {
|
|
24
|
+
var editor = _ref2.editor;
|
|
25
|
+
var html = editor.getHTML();
|
|
26
|
+
onChange === null || onChange === void 0 || onChange(html);
|
|
27
|
+
}
|
|
28
|
+
});
|
|
29
|
+
|
|
30
|
+
// 当外部 value 变化时,更新编辑器内容
|
|
31
|
+
useEffect(function () {
|
|
32
|
+
if (editor && value !== undefined && value !== editor.getHTML()) {
|
|
33
|
+
editor.commands.setContent(value);
|
|
34
|
+
}
|
|
35
|
+
}, [value, editor]);
|
|
36
|
+
var providerValue = useMemo(function () {
|
|
37
|
+
return {
|
|
38
|
+
editor: editor
|
|
39
|
+
};
|
|
40
|
+
}, [editor]);
|
|
41
|
+
return /*#__PURE__*/React.createElement(EditorContext.Provider, {
|
|
42
|
+
value: providerValue
|
|
43
|
+
}, /*#__PURE__*/React.createElement(HaoRichEditorContainer, null, /*#__PURE__*/React.createElement(MenuBar, {
|
|
44
|
+
onUploadImage: onUploadImage,
|
|
45
|
+
onUploadVideo: onUploadVideo
|
|
46
|
+
}), /*#__PURE__*/React.createElement(HaoRichEditorContent, {
|
|
47
|
+
editor: editor
|
|
48
|
+
})));
|
|
49
|
+
};
|
|
50
|
+
export default HaoRichEditor;
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
export declare const HaoRichEditorContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
|
|
3
|
+
export declare const HaoRichEditorContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<Omit<import("@tiptap/react").EditorContentProps, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
|
|
4
|
+
ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
|
|
5
|
+
}, never>> & string & Omit<import("react").NamedExoticComponent<Omit<import("@tiptap/react").EditorContentProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>, keyof import("react").Component<any, {}, any>>;
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { EditorContent } from '@tiptap/react';
|
|
2
|
+
import styled from 'styled-components';
|
|
3
|
+
export var HaoRichEditorContainer = styled.div.withConfig({
|
|
4
|
+
displayName: "HaoRichEditorContainer",
|
|
5
|
+
componentId: "editor-9e80__sc-vm8duh-0"
|
|
6
|
+
})(["border:1px solid #e0e0e0;border-radius:8px;max-width:inherit;width:100%;overflow:hidden;"]);
|
|
7
|
+
export var HaoRichEditorContent = styled(EditorContent).withConfig({
|
|
8
|
+
displayName: "HaoRichEditorContent",
|
|
9
|
+
componentId: "editor-9e80__sc-vm8duh-1"
|
|
10
|
+
})(["padding:0 10px;height:500px;overflow-y:auto;overflow-x:hidden;"]);
|
|
@@ -0,0 +1,362 @@
|
|
|
1
|
+
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
2
|
+
function _regeneratorRuntime() { "use strict"; /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */ _regeneratorRuntime = function _regeneratorRuntime() { return e; }; var t, e = {}, r = Object.prototype, n = r.hasOwnProperty, o = Object.defineProperty || function (t, e, r) { t[e] = r.value; }, i = "function" == typeof Symbol ? Symbol : {}, a = i.iterator || "@@iterator", c = i.asyncIterator || "@@asyncIterator", u = i.toStringTag || "@@toStringTag"; function define(t, e, r) { return Object.defineProperty(t, e, { value: r, enumerable: !0, configurable: !0, writable: !0 }), t[e]; } try { define({}, ""); } catch (t) { define = function define(t, e, r) { return t[e] = r; }; } function wrap(t, e, r, n) { var i = e && e.prototype instanceof Generator ? e : Generator, a = Object.create(i.prototype), c = new Context(n || []); return o(a, "_invoke", { value: makeInvokeMethod(t, r, c) }), a; } function tryCatch(t, e, r) { try { return { type: "normal", arg: t.call(e, r) }; } catch (t) { return { type: "throw", arg: t }; } } e.wrap = wrap; var h = "suspendedStart", l = "suspendedYield", f = "executing", s = "completed", y = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} var p = {}; define(p, a, function () { return this; }); var d = Object.getPrototypeOf, v = d && d(d(values([]))); v && v !== r && n.call(v, a) && (p = v); var g = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(p); function defineIteratorMethods(t) { ["next", "throw", "return"].forEach(function (e) { define(t, e, function (t) { return this._invoke(e, t); }); }); } function AsyncIterator(t, e) { function invoke(r, o, i, a) { var c = tryCatch(t[r], t, o); if ("throw" !== c.type) { var u = c.arg, h = u.value; return h && "object" == _typeof(h) && n.call(h, "__await") ? e.resolve(h.__await).then(function (t) { invoke("next", t, i, a); }, function (t) { invoke("throw", t, i, a); }) : e.resolve(h).then(function (t) { u.value = t, i(u); }, function (t) { return invoke("throw", t, i, a); }); } a(c.arg); } var r; o(this, "_invoke", { value: function value(t, n) { function callInvokeWithMethodAndArg() { return new e(function (e, r) { invoke(t, n, e, r); }); } return r = r ? r.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg(); } }); } function makeInvokeMethod(e, r, n) { var o = h; return function (i, a) { if (o === f) throw new Error("Generator is already running"); if (o === s) { if ("throw" === i) throw a; return { value: t, done: !0 }; } for (n.method = i, n.arg = a;;) { var c = n.delegate; if (c) { var u = maybeInvokeDelegate(c, n); if (u) { if (u === y) continue; return u; } } if ("next" === n.method) n.sent = n._sent = n.arg;else if ("throw" === n.method) { if (o === h) throw o = s, n.arg; n.dispatchException(n.arg); } else "return" === n.method && n.abrupt("return", n.arg); o = f; var p = tryCatch(e, r, n); if ("normal" === p.type) { if (o = n.done ? s : l, p.arg === y) continue; return { value: p.arg, done: n.done }; } "throw" === p.type && (o = s, n.method = "throw", n.arg = p.arg); } }; } function maybeInvokeDelegate(e, r) { var n = r.method, o = e.iterator[n]; if (o === t) return r.delegate = null, "throw" === n && e.iterator.return && (r.method = "return", r.arg = t, maybeInvokeDelegate(e, r), "throw" === r.method) || "return" !== n && (r.method = "throw", r.arg = new TypeError("The iterator does not provide a '" + n + "' method")), y; var i = tryCatch(o, e.iterator, r.arg); if ("throw" === i.type) return r.method = "throw", r.arg = i.arg, r.delegate = null, y; var a = i.arg; return a ? a.done ? (r[e.resultName] = a.value, r.next = e.nextLoc, "return" !== r.method && (r.method = "next", r.arg = t), r.delegate = null, y) : a : (r.method = "throw", r.arg = new TypeError("iterator result is not an object"), r.delegate = null, y); } function pushTryEntry(t) { var e = { tryLoc: t[0] }; 1 in t && (e.catchLoc = t[1]), 2 in t && (e.finallyLoc = t[2], e.afterLoc = t[3]), this.tryEntries.push(e); } function resetTryEntry(t) { var e = t.completion || {}; e.type = "normal", delete e.arg, t.completion = e; } function Context(t) { this.tryEntries = [{ tryLoc: "root" }], t.forEach(pushTryEntry, this), this.reset(!0); } function values(e) { if (e || "" === e) { var r = e[a]; if (r) return r.call(e); if ("function" == typeof e.next) return e; if (!isNaN(e.length)) { var o = -1, i = function next() { for (; ++o < e.length;) if (n.call(e, o)) return next.value = e[o], next.done = !1, next; return next.value = t, next.done = !0, next; }; return i.next = i; } } throw new TypeError(_typeof(e) + " is not iterable"); } return GeneratorFunction.prototype = GeneratorFunctionPrototype, o(g, "constructor", { value: GeneratorFunctionPrototype, configurable: !0 }), o(GeneratorFunctionPrototype, "constructor", { value: GeneratorFunction, configurable: !0 }), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, u, "GeneratorFunction"), e.isGeneratorFunction = function (t) { var e = "function" == typeof t && t.constructor; return !!e && (e === GeneratorFunction || "GeneratorFunction" === (e.displayName || e.name)); }, e.mark = function (t) { return Object.setPrototypeOf ? Object.setPrototypeOf(t, GeneratorFunctionPrototype) : (t.__proto__ = GeneratorFunctionPrototype, define(t, u, "GeneratorFunction")), t.prototype = Object.create(g), t; }, e.awrap = function (t) { return { __await: t }; }, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype, c, function () { return this; }), e.AsyncIterator = AsyncIterator, e.async = function (t, r, n, o, i) { void 0 === i && (i = Promise); var a = new AsyncIterator(wrap(t, r, n, o), i); return e.isGeneratorFunction(r) ? a : a.next().then(function (t) { return t.done ? t.value : a.next(); }); }, defineIteratorMethods(g), define(g, u, "Generator"), define(g, a, function () { return this; }), define(g, "toString", function () { return "[object Generator]"; }), e.keys = function (t) { var e = Object(t), r = []; for (var n in e) r.push(n); return r.reverse(), function next() { for (; r.length;) { var t = r.pop(); if (t in e) return next.value = t, next.done = !1, next; } return next.done = !0, next; }; }, e.values = values, Context.prototype = { constructor: Context, reset: function reset(e) { if (this.prev = 0, this.next = 0, this.sent = this._sent = t, this.done = !1, this.delegate = null, this.method = "next", this.arg = t, this.tryEntries.forEach(resetTryEntry), !e) for (var r in this) "t" === r.charAt(0) && n.call(this, r) && !isNaN(+r.slice(1)) && (this[r] = t); }, stop: function stop() { this.done = !0; var t = this.tryEntries[0].completion; if ("throw" === t.type) throw t.arg; return this.rval; }, dispatchException: function dispatchException(e) { if (this.done) throw e; var r = this; function handle(n, o) { return a.type = "throw", a.arg = e, r.next = n, o && (r.method = "next", r.arg = t), !!o; } for (var o = this.tryEntries.length - 1; o >= 0; --o) { var i = this.tryEntries[o], a = i.completion; if ("root" === i.tryLoc) return handle("end"); if (i.tryLoc <= this.prev) { var c = n.call(i, "catchLoc"), u = n.call(i, "finallyLoc"); if (c && u) { if (this.prev < i.catchLoc) return handle(i.catchLoc, !0); if (this.prev < i.finallyLoc) return handle(i.finallyLoc); } else if (c) { if (this.prev < i.catchLoc) return handle(i.catchLoc, !0); } else { if (!u) throw new Error("try statement without catch or finally"); if (this.prev < i.finallyLoc) return handle(i.finallyLoc); } } } }, abrupt: function abrupt(t, e) { for (var r = this.tryEntries.length - 1; r >= 0; --r) { var o = this.tryEntries[r]; if (o.tryLoc <= this.prev && n.call(o, "finallyLoc") && this.prev < o.finallyLoc) { var i = o; break; } } i && ("break" === t || "continue" === t) && i.tryLoc <= e && e <= i.finallyLoc && (i = null); var a = i ? i.completion : {}; return a.type = t, a.arg = e, i ? (this.method = "next", this.next = i.finallyLoc, y) : this.complete(a); }, complete: function complete(t, e) { if ("throw" === t.type) throw t.arg; return "break" === t.type || "continue" === t.type ? this.next = t.arg : "return" === t.type ? (this.rval = this.arg = t.arg, this.method = "return", this.next = "end") : "normal" === t.type && e && (this.next = e), y; }, finish: function finish(t) { for (var e = this.tryEntries.length - 1; e >= 0; --e) { var r = this.tryEntries[e]; if (r.finallyLoc === t) return this.complete(r.completion, r.afterLoc), resetTryEntry(r), y; } }, catch: function _catch(t) { for (var e = this.tryEntries.length - 1; e >= 0; --e) { var r = this.tryEntries[e]; if (r.tryLoc === t) { var n = r.completion; if ("throw" === n.type) { var o = n.arg; resetTryEntry(r); } return o; } } throw new Error("illegal catch attempt"); }, delegateYield: function delegateYield(e, r, n) { return this.delegate = { iterator: values(e), resultName: r, nextLoc: n }, "next" === this.method && (this.arg = t), y; } }, e; }
|
|
3
|
+
function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
|
|
4
|
+
function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
|
|
5
|
+
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
6
|
+
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
7
|
+
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
8
|
+
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
|
|
9
|
+
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
|
|
10
|
+
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
11
|
+
import React from 'react';
|
|
12
|
+
import { useCurrentEditor, useEditorState } from '@tiptap/react';
|
|
13
|
+
import { useState } from 'react';
|
|
14
|
+
import { MenuBarButton, MenuBarContainer, MenuBarContent, MenuBarInput, MenuBarColorInput } from "./index.styled";
|
|
15
|
+
var MenuBar = function MenuBar(_ref) {
|
|
16
|
+
var _editorState$isParagr, _editorState$isBold, _editorState$isItalic, _editorState$isStrike, _editorState$isHeadin, _editorState$isHeadin2, _editorState$isHeadin3, _editorState$isHeadin4, _editorState$isHeadin5, _editorState$isHeadin6, _editorState$isAlignL, _editorState$isAlignC, _editorState$isAlignR, _editorState$isSmall, _editorState$isLarge, _editorState$isExtraL, _editorState$isBullet, _editorState$isOrdere, _editorState$isCodeBl, _editorState$isBlockq, _editorState$color;
|
|
17
|
+
var onUploadImage = _ref.onUploadImage,
|
|
18
|
+
onUploadVideo = _ref.onUploadVideo;
|
|
19
|
+
var _useCurrentEditor = useCurrentEditor(),
|
|
20
|
+
editor = _useCurrentEditor.editor;
|
|
21
|
+
var _useState = useState(false),
|
|
22
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
23
|
+
uploading = _useState2[0],
|
|
24
|
+
setUploading = _useState2[1];
|
|
25
|
+
var editorState = useEditorState({
|
|
26
|
+
editor: editor,
|
|
27
|
+
selector: function selector(ctx) {
|
|
28
|
+
var _ctx$editor$isActive, _ctx$editor, _ctx$editor$can$chain, _ctx$editor2, _ctx$editor$isActive2, _ctx$editor3, _ctx$editor$can$chain2, _ctx$editor4, _ctx$editor$isActive3, _ctx$editor5, _ctx$editor$can$chain3, _ctx$editor6, _ctx$editor$isActive4, _ctx$editor7, _ctx$editor$can$chain4, _ctx$editor8, _ctx$editor$isActive5, _ctx$editor9, _ctx$editor$isActive6, _ctx$editor10, _ctx$editor$isActive7, _ctx$editor11, _ctx$editor$isActive8, _ctx$editor12, _ctx$editor$isActive9, _ctx$editor13, _ctx$editor$isActive10, _ctx$editor14, _ctx$editor$isActive11, _ctx$editor15, _ctx$editor$isActive12, _ctx$editor16, _ctx$editor$isActive13, _ctx$editor17, _ctx$editor$isActive14, _ctx$editor18, _ctx$editor$isActive15, _ctx$editor19, _ctx$editor$can$chain5, _ctx$editor20, _ctx$editor$can$chain6, _ctx$editor21, _ctx$editor$isActive16, _ctx$editor22, _ctx$editor$isActive17, _ctx$editor23, _ctx$editor$isActive18, _ctx$editor24, _ctx$editor$getAttrib, _ctx$editor25, _ctx$editor26, _ctx$editor27, _ctx$editor28;
|
|
29
|
+
return {
|
|
30
|
+
isBold: (_ctx$editor$isActive = ctx === null || ctx === void 0 || (_ctx$editor = ctx.editor) === null || _ctx$editor === void 0 ? void 0 : _ctx$editor.isActive('bold')) !== null && _ctx$editor$isActive !== void 0 ? _ctx$editor$isActive : false,
|
|
31
|
+
canBold: (_ctx$editor$can$chain = ctx === null || ctx === void 0 || (_ctx$editor2 = ctx.editor) === null || _ctx$editor2 === void 0 ? void 0 : _ctx$editor2.can().chain().toggleBold().run()) !== null && _ctx$editor$can$chain !== void 0 ? _ctx$editor$can$chain : false,
|
|
32
|
+
isItalic: (_ctx$editor$isActive2 = ctx === null || ctx === void 0 || (_ctx$editor3 = ctx.editor) === null || _ctx$editor3 === void 0 ? void 0 : _ctx$editor3.isActive('italic')) !== null && _ctx$editor$isActive2 !== void 0 ? _ctx$editor$isActive2 : false,
|
|
33
|
+
canItalic: (_ctx$editor$can$chain2 = ctx === null || ctx === void 0 || (_ctx$editor4 = ctx.editor) === null || _ctx$editor4 === void 0 ? void 0 : _ctx$editor4.can().chain().toggleItalic().run()) !== null && _ctx$editor$can$chain2 !== void 0 ? _ctx$editor$can$chain2 : false,
|
|
34
|
+
isStrike: (_ctx$editor$isActive3 = ctx === null || ctx === void 0 || (_ctx$editor5 = ctx.editor) === null || _ctx$editor5 === void 0 ? void 0 : _ctx$editor5.isActive('strike')) !== null && _ctx$editor$isActive3 !== void 0 ? _ctx$editor$isActive3 : false,
|
|
35
|
+
canStrike: (_ctx$editor$can$chain3 = ctx === null || ctx === void 0 || (_ctx$editor6 = ctx.editor) === null || _ctx$editor6 === void 0 ? void 0 : _ctx$editor6.can().chain().toggleStrike().run()) !== null && _ctx$editor$can$chain3 !== void 0 ? _ctx$editor$can$chain3 : false,
|
|
36
|
+
isCode: (_ctx$editor$isActive4 = ctx === null || ctx === void 0 || (_ctx$editor7 = ctx.editor) === null || _ctx$editor7 === void 0 ? void 0 : _ctx$editor7.isActive('code')) !== null && _ctx$editor$isActive4 !== void 0 ? _ctx$editor$isActive4 : false,
|
|
37
|
+
canCode: (_ctx$editor$can$chain4 = ctx === null || ctx === void 0 || (_ctx$editor8 = ctx.editor) === null || _ctx$editor8 === void 0 ? void 0 : _ctx$editor8.can().chain().toggleCode().run()) !== null && _ctx$editor$can$chain4 !== void 0 ? _ctx$editor$can$chain4 : false,
|
|
38
|
+
isParagraph: (_ctx$editor$isActive5 = ctx === null || ctx === void 0 || (_ctx$editor9 = ctx.editor) === null || _ctx$editor9 === void 0 ? void 0 : _ctx$editor9.isActive('paragraph')) !== null && _ctx$editor$isActive5 !== void 0 ? _ctx$editor$isActive5 : false,
|
|
39
|
+
isHeading1: (_ctx$editor$isActive6 = ctx === null || ctx === void 0 || (_ctx$editor10 = ctx.editor) === null || _ctx$editor10 === void 0 ? void 0 : _ctx$editor10.isActive('heading', {
|
|
40
|
+
level: 1
|
|
41
|
+
})) !== null && _ctx$editor$isActive6 !== void 0 ? _ctx$editor$isActive6 : false,
|
|
42
|
+
isHeading2: (_ctx$editor$isActive7 = ctx === null || ctx === void 0 || (_ctx$editor11 = ctx.editor) === null || _ctx$editor11 === void 0 ? void 0 : _ctx$editor11.isActive('heading', {
|
|
43
|
+
level: 2
|
|
44
|
+
})) !== null && _ctx$editor$isActive7 !== void 0 ? _ctx$editor$isActive7 : false,
|
|
45
|
+
isHeading3: (_ctx$editor$isActive8 = ctx === null || ctx === void 0 || (_ctx$editor12 = ctx.editor) === null || _ctx$editor12 === void 0 ? void 0 : _ctx$editor12.isActive('heading', {
|
|
46
|
+
level: 3
|
|
47
|
+
})) !== null && _ctx$editor$isActive8 !== void 0 ? _ctx$editor$isActive8 : false,
|
|
48
|
+
isHeading4: (_ctx$editor$isActive9 = ctx === null || ctx === void 0 || (_ctx$editor13 = ctx.editor) === null || _ctx$editor13 === void 0 ? void 0 : _ctx$editor13.isActive('heading', {
|
|
49
|
+
level: 4
|
|
50
|
+
})) !== null && _ctx$editor$isActive9 !== void 0 ? _ctx$editor$isActive9 : false,
|
|
51
|
+
isHeading5: (_ctx$editor$isActive10 = ctx === null || ctx === void 0 || (_ctx$editor14 = ctx.editor) === null || _ctx$editor14 === void 0 ? void 0 : _ctx$editor14.isActive('heading', {
|
|
52
|
+
level: 5
|
|
53
|
+
})) !== null && _ctx$editor$isActive10 !== void 0 ? _ctx$editor$isActive10 : false,
|
|
54
|
+
isHeading6: (_ctx$editor$isActive11 = ctx === null || ctx === void 0 || (_ctx$editor15 = ctx.editor) === null || _ctx$editor15 === void 0 ? void 0 : _ctx$editor15.isActive('heading', {
|
|
55
|
+
level: 6
|
|
56
|
+
})) !== null && _ctx$editor$isActive11 !== void 0 ? _ctx$editor$isActive11 : false,
|
|
57
|
+
isBulletList: (_ctx$editor$isActive12 = ctx === null || ctx === void 0 || (_ctx$editor16 = ctx.editor) === null || _ctx$editor16 === void 0 ? void 0 : _ctx$editor16.isActive('bulletList')) !== null && _ctx$editor$isActive12 !== void 0 ? _ctx$editor$isActive12 : false,
|
|
58
|
+
isOrderedList: (_ctx$editor$isActive13 = ctx === null || ctx === void 0 || (_ctx$editor17 = ctx.editor) === null || _ctx$editor17 === void 0 ? void 0 : _ctx$editor17.isActive('orderedList')) !== null && _ctx$editor$isActive13 !== void 0 ? _ctx$editor$isActive13 : false,
|
|
59
|
+
isCodeBlock: (_ctx$editor$isActive14 = ctx === null || ctx === void 0 || (_ctx$editor18 = ctx.editor) === null || _ctx$editor18 === void 0 ? void 0 : _ctx$editor18.isActive('codeBlock')) !== null && _ctx$editor$isActive14 !== void 0 ? _ctx$editor$isActive14 : false,
|
|
60
|
+
isBlockquote: (_ctx$editor$isActive15 = ctx === null || ctx === void 0 || (_ctx$editor19 = ctx.editor) === null || _ctx$editor19 === void 0 ? void 0 : _ctx$editor19.isActive('blockquote')) !== null && _ctx$editor$isActive15 !== void 0 ? _ctx$editor$isActive15 : false,
|
|
61
|
+
canUndo: (_ctx$editor$can$chain5 = ctx === null || ctx === void 0 || (_ctx$editor20 = ctx.editor) === null || _ctx$editor20 === void 0 ? void 0 : _ctx$editor20.can().chain().undo().run()) !== null && _ctx$editor$can$chain5 !== void 0 ? _ctx$editor$can$chain5 : false,
|
|
62
|
+
canRedo: (_ctx$editor$can$chain6 = ctx === null || ctx === void 0 || (_ctx$editor21 = ctx.editor) === null || _ctx$editor21 === void 0 ? void 0 : _ctx$editor21.can().chain().redo().run()) !== null && _ctx$editor$can$chain6 !== void 0 ? _ctx$editor$can$chain6 : false,
|
|
63
|
+
isAlignLeft: (_ctx$editor$isActive16 = ctx === null || ctx === void 0 || (_ctx$editor22 = ctx.editor) === null || _ctx$editor22 === void 0 ? void 0 : _ctx$editor22.isActive({
|
|
64
|
+
textAlign: 'left'
|
|
65
|
+
})) !== null && _ctx$editor$isActive16 !== void 0 ? _ctx$editor$isActive16 : false,
|
|
66
|
+
isAlignCenter: (_ctx$editor$isActive17 = ctx === null || ctx === void 0 || (_ctx$editor23 = ctx.editor) === null || _ctx$editor23 === void 0 ? void 0 : _ctx$editor23.isActive({
|
|
67
|
+
textAlign: 'center'
|
|
68
|
+
})) !== null && _ctx$editor$isActive17 !== void 0 ? _ctx$editor$isActive17 : false,
|
|
69
|
+
isAlignRight: (_ctx$editor$isActive18 = ctx === null || ctx === void 0 || (_ctx$editor24 = ctx.editor) === null || _ctx$editor24 === void 0 ? void 0 : _ctx$editor24.isActive({
|
|
70
|
+
textAlign: 'right'
|
|
71
|
+
})) !== null && _ctx$editor$isActive18 !== void 0 ? _ctx$editor$isActive18 : false,
|
|
72
|
+
color: (_ctx$editor$getAttrib = ctx === null || ctx === void 0 || (_ctx$editor25 = ctx.editor) === null || _ctx$editor25 === void 0 ? void 0 : _ctx$editor25.getAttributes('textStyle').color) !== null && _ctx$editor$getAttrib !== void 0 ? _ctx$editor$getAttrib : '',
|
|
73
|
+
isSmall: ctx === null || ctx === void 0 || (_ctx$editor26 = ctx.editor) === null || _ctx$editor26 === void 0 ? void 0 : _ctx$editor26.isActive('textStyle', {
|
|
74
|
+
lineHeight: '1.5'
|
|
75
|
+
}),
|
|
76
|
+
isLarge: ctx === null || ctx === void 0 || (_ctx$editor27 = ctx.editor) === null || _ctx$editor27 === void 0 ? void 0 : _ctx$editor27.isActive('textStyle', {
|
|
77
|
+
lineHeight: '2.0'
|
|
78
|
+
}),
|
|
79
|
+
isExtraLarge: ctx === null || ctx === void 0 || (_ctx$editor28 = ctx.editor) === null || _ctx$editor28 === void 0 ? void 0 : _ctx$editor28.isActive('textStyle', {
|
|
80
|
+
lineHeight: '4.0'
|
|
81
|
+
})
|
|
82
|
+
};
|
|
83
|
+
}
|
|
84
|
+
});
|
|
85
|
+
var handleImageUpload = /*#__PURE__*/function () {
|
|
86
|
+
var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(event) {
|
|
87
|
+
var _event$target$files;
|
|
88
|
+
var file, formData, imageUrl;
|
|
89
|
+
return _regeneratorRuntime().wrap(function _callee$(_context) {
|
|
90
|
+
while (1) switch (_context.prev = _context.next) {
|
|
91
|
+
case 0:
|
|
92
|
+
file = (_event$target$files = event.target.files) === null || _event$target$files === void 0 ? void 0 : _event$target$files[0];
|
|
93
|
+
if (file) {
|
|
94
|
+
_context.next = 3;
|
|
95
|
+
break;
|
|
96
|
+
}
|
|
97
|
+
return _context.abrupt("return");
|
|
98
|
+
case 3:
|
|
99
|
+
if (file.type.startsWith('image/')) {
|
|
100
|
+
_context.next = 5;
|
|
101
|
+
break;
|
|
102
|
+
}
|
|
103
|
+
return _context.abrupt("return");
|
|
104
|
+
case 5:
|
|
105
|
+
setUploading(true);
|
|
106
|
+
formData = new FormData();
|
|
107
|
+
formData.append('file', file);
|
|
108
|
+
_context.prev = 8;
|
|
109
|
+
_context.next = 11;
|
|
110
|
+
return onUploadImage === null || onUploadImage === void 0 ? void 0 : onUploadImage(file);
|
|
111
|
+
case 11:
|
|
112
|
+
imageUrl = _context.sent;
|
|
113
|
+
editor === null || editor === void 0 || editor.chain().focus().setImage({
|
|
114
|
+
src: imageUrl !== null && imageUrl !== void 0 ? imageUrl : ''
|
|
115
|
+
}).run();
|
|
116
|
+
_context.next = 18;
|
|
117
|
+
break;
|
|
118
|
+
case 15:
|
|
119
|
+
_context.prev = 15;
|
|
120
|
+
_context.t0 = _context["catch"](8);
|
|
121
|
+
console.error('图片上传失败:', _context.t0);
|
|
122
|
+
case 18:
|
|
123
|
+
_context.prev = 18;
|
|
124
|
+
setUploading(false);
|
|
125
|
+
return _context.finish(18);
|
|
126
|
+
case 21:
|
|
127
|
+
case "end":
|
|
128
|
+
return _context.stop();
|
|
129
|
+
}
|
|
130
|
+
}, _callee, null, [[8, 15, 18, 21]]);
|
|
131
|
+
}));
|
|
132
|
+
return function handleImageUpload(_x) {
|
|
133
|
+
return _ref2.apply(this, arguments);
|
|
134
|
+
};
|
|
135
|
+
}();
|
|
136
|
+
var handleVideoUpload = /*#__PURE__*/function () {
|
|
137
|
+
var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(event) {
|
|
138
|
+
var _event$target$files2;
|
|
139
|
+
var file, videoUrl;
|
|
140
|
+
return _regeneratorRuntime().wrap(function _callee2$(_context2) {
|
|
141
|
+
while (1) switch (_context2.prev = _context2.next) {
|
|
142
|
+
case 0:
|
|
143
|
+
file = (_event$target$files2 = event.target.files) === null || _event$target$files2 === void 0 ? void 0 : _event$target$files2[0];
|
|
144
|
+
if (file) {
|
|
145
|
+
_context2.next = 3;
|
|
146
|
+
break;
|
|
147
|
+
}
|
|
148
|
+
return _context2.abrupt("return");
|
|
149
|
+
case 3:
|
|
150
|
+
if (file.type.startsWith('video/')) {
|
|
151
|
+
_context2.next = 5;
|
|
152
|
+
break;
|
|
153
|
+
}
|
|
154
|
+
return _context2.abrupt("return");
|
|
155
|
+
case 5:
|
|
156
|
+
setUploading(true);
|
|
157
|
+
_context2.prev = 6;
|
|
158
|
+
_context2.next = 9;
|
|
159
|
+
return onUploadVideo === null || onUploadVideo === void 0 ? void 0 : onUploadVideo(file);
|
|
160
|
+
case 9:
|
|
161
|
+
videoUrl = _context2.sent;
|
|
162
|
+
if (videoUrl) {
|
|
163
|
+
_context2.next = 12;
|
|
164
|
+
break;
|
|
165
|
+
}
|
|
166
|
+
return _context2.abrupt("return");
|
|
167
|
+
case 12:
|
|
168
|
+
editor === null || editor === void 0 || editor.chain().focus().setVideo({
|
|
169
|
+
src: videoUrl,
|
|
170
|
+
controls: true
|
|
171
|
+
}).run();
|
|
172
|
+
_context2.next = 18;
|
|
173
|
+
break;
|
|
174
|
+
case 15:
|
|
175
|
+
_context2.prev = 15;
|
|
176
|
+
_context2.t0 = _context2["catch"](6);
|
|
177
|
+
console.error('视频上传失败:', _context2.t0);
|
|
178
|
+
case 18:
|
|
179
|
+
_context2.prev = 18;
|
|
180
|
+
setUploading(false);
|
|
181
|
+
return _context2.finish(18);
|
|
182
|
+
case 21:
|
|
183
|
+
case "end":
|
|
184
|
+
return _context2.stop();
|
|
185
|
+
}
|
|
186
|
+
}, _callee2, null, [[6, 15, 18, 21]]);
|
|
187
|
+
}));
|
|
188
|
+
return function handleVideoUpload(_x2) {
|
|
189
|
+
return _ref3.apply(this, arguments);
|
|
190
|
+
};
|
|
191
|
+
}();
|
|
192
|
+
return /*#__PURE__*/React.createElement(MenuBarContainer, null, /*#__PURE__*/React.createElement(MenuBarContent, null, /*#__PURE__*/React.createElement(MenuBarButton, {
|
|
193
|
+
onClick: function onClick(e) {
|
|
194
|
+
e.preventDefault();
|
|
195
|
+
editor === null || editor === void 0 || editor.chain().focus().setParagraph().run();
|
|
196
|
+
},
|
|
197
|
+
isActive: (_editorState$isParagr = editorState === null || editorState === void 0 ? void 0 : editorState.isParagraph) !== null && _editorState$isParagr !== void 0 ? _editorState$isParagr : false
|
|
198
|
+
}, "\u6BB5\u843D"), /*#__PURE__*/React.createElement(MenuBarButton, {
|
|
199
|
+
onClick: function onClick(e) {
|
|
200
|
+
e.preventDefault();
|
|
201
|
+
editor === null || editor === void 0 || editor.chain().focus().toggleBold().run();
|
|
202
|
+
},
|
|
203
|
+
disabled: !(editorState !== null && editorState !== void 0 && editorState.canBold),
|
|
204
|
+
isActive: (_editorState$isBold = editorState === null || editorState === void 0 ? void 0 : editorState.isBold) !== null && _editorState$isBold !== void 0 ? _editorState$isBold : false
|
|
205
|
+
}, "\u52A0\u7C97"), /*#__PURE__*/React.createElement(MenuBarButton, {
|
|
206
|
+
onClick: function onClick(e) {
|
|
207
|
+
e.preventDefault();
|
|
208
|
+
editor === null || editor === void 0 || editor.chain().focus().toggleItalic().run();
|
|
209
|
+
},
|
|
210
|
+
isActive: (_editorState$isItalic = editorState === null || editorState === void 0 ? void 0 : editorState.isItalic) !== null && _editorState$isItalic !== void 0 ? _editorState$isItalic : false
|
|
211
|
+
}, "\u659C\u4F53"), /*#__PURE__*/React.createElement(MenuBarButton, {
|
|
212
|
+
onClick: function onClick(e) {
|
|
213
|
+
e.preventDefault();
|
|
214
|
+
editor === null || editor === void 0 || editor.chain().focus().toggleStrike().run();
|
|
215
|
+
},
|
|
216
|
+
isActive: (_editorState$isStrike = editorState === null || editorState === void 0 ? void 0 : editorState.isStrike) !== null && _editorState$isStrike !== void 0 ? _editorState$isStrike : false
|
|
217
|
+
}, "\u5220\u9664\u7EBF"), /*#__PURE__*/React.createElement(MenuBarButton, {
|
|
218
|
+
onClick: function onClick(e) {
|
|
219
|
+
e.preventDefault();
|
|
220
|
+
editor === null || editor === void 0 || editor.chain().focus().toggleHeading({
|
|
221
|
+
level: 1
|
|
222
|
+
}).run();
|
|
223
|
+
},
|
|
224
|
+
isActive: (_editorState$isHeadin = editorState === null || editorState === void 0 ? void 0 : editorState.isHeading1) !== null && _editorState$isHeadin !== void 0 ? _editorState$isHeadin : false
|
|
225
|
+
}, "H1"), /*#__PURE__*/React.createElement(MenuBarButton, {
|
|
226
|
+
onClick: function onClick(e) {
|
|
227
|
+
e.preventDefault();
|
|
228
|
+
editor === null || editor === void 0 || editor.chain().focus().toggleHeading({
|
|
229
|
+
level: 2
|
|
230
|
+
}).run();
|
|
231
|
+
},
|
|
232
|
+
isActive: (_editorState$isHeadin2 = editorState === null || editorState === void 0 ? void 0 : editorState.isHeading2) !== null && _editorState$isHeadin2 !== void 0 ? _editorState$isHeadin2 : false
|
|
233
|
+
}, "H2"), /*#__PURE__*/React.createElement(MenuBarButton, {
|
|
234
|
+
onClick: function onClick(e) {
|
|
235
|
+
e.preventDefault();
|
|
236
|
+
editor === null || editor === void 0 || editor.chain().focus().toggleHeading({
|
|
237
|
+
level: 3
|
|
238
|
+
}).run();
|
|
239
|
+
},
|
|
240
|
+
isActive: (_editorState$isHeadin3 = editorState === null || editorState === void 0 ? void 0 : editorState.isHeading3) !== null && _editorState$isHeadin3 !== void 0 ? _editorState$isHeadin3 : false
|
|
241
|
+
}, "H3"), /*#__PURE__*/React.createElement(MenuBarButton, {
|
|
242
|
+
onClick: function onClick(e) {
|
|
243
|
+
e.preventDefault();
|
|
244
|
+
editor === null || editor === void 0 || editor.chain().focus().toggleHeading({
|
|
245
|
+
level: 4
|
|
246
|
+
}).run();
|
|
247
|
+
},
|
|
248
|
+
isActive: (_editorState$isHeadin4 = editorState === null || editorState === void 0 ? void 0 : editorState.isHeading4) !== null && _editorState$isHeadin4 !== void 0 ? _editorState$isHeadin4 : false
|
|
249
|
+
}, "H4"), /*#__PURE__*/React.createElement(MenuBarButton, {
|
|
250
|
+
onClick: function onClick(e) {
|
|
251
|
+
e.preventDefault();
|
|
252
|
+
editor === null || editor === void 0 || editor.chain().focus().toggleHeading({
|
|
253
|
+
level: 5
|
|
254
|
+
}).run();
|
|
255
|
+
},
|
|
256
|
+
isActive: (_editorState$isHeadin5 = editorState === null || editorState === void 0 ? void 0 : editorState.isHeading5) !== null && _editorState$isHeadin5 !== void 0 ? _editorState$isHeadin5 : false
|
|
257
|
+
}, "H5"), /*#__PURE__*/React.createElement(MenuBarButton, {
|
|
258
|
+
onClick: function onClick(e) {
|
|
259
|
+
e.preventDefault();
|
|
260
|
+
editor === null || editor === void 0 || editor.chain().focus().toggleHeading({
|
|
261
|
+
level: 6
|
|
262
|
+
}).run();
|
|
263
|
+
},
|
|
264
|
+
isActive: (_editorState$isHeadin6 = editorState === null || editorState === void 0 ? void 0 : editorState.isHeading6) !== null && _editorState$isHeadin6 !== void 0 ? _editorState$isHeadin6 : false
|
|
265
|
+
}, "H6"), /*#__PURE__*/React.createElement(MenuBarButton, {
|
|
266
|
+
onClick: function onClick(e) {
|
|
267
|
+
e.preventDefault();
|
|
268
|
+
editor === null || editor === void 0 || editor.chain().focus().setTextAlign('left').run();
|
|
269
|
+
},
|
|
270
|
+
isActive: (_editorState$isAlignL = editorState === null || editorState === void 0 ? void 0 : editorState.isAlignLeft) !== null && _editorState$isAlignL !== void 0 ? _editorState$isAlignL : false
|
|
271
|
+
}, "\u5DE6\u5BF9\u9F50"), /*#__PURE__*/React.createElement(MenuBarButton, {
|
|
272
|
+
onClick: function onClick(e) {
|
|
273
|
+
e.preventDefault();
|
|
274
|
+
editor === null || editor === void 0 || editor.chain().focus().setTextAlign('center').run();
|
|
275
|
+
},
|
|
276
|
+
isActive: (_editorState$isAlignC = editorState === null || editorState === void 0 ? void 0 : editorState.isAlignCenter) !== null && _editorState$isAlignC !== void 0 ? _editorState$isAlignC : false
|
|
277
|
+
}, "\u5C45\u4E2D"), /*#__PURE__*/React.createElement(MenuBarButton, {
|
|
278
|
+
onClick: function onClick(e) {
|
|
279
|
+
e.preventDefault();
|
|
280
|
+
editor === null || editor === void 0 || editor.chain().focus().setTextAlign('right').run();
|
|
281
|
+
},
|
|
282
|
+
isActive: (_editorState$isAlignR = editorState === null || editorState === void 0 ? void 0 : editorState.isAlignRight) !== null && _editorState$isAlignR !== void 0 ? _editorState$isAlignR : false
|
|
283
|
+
}, "\u53F3\u5BF9\u9F50"), /*#__PURE__*/React.createElement(MenuBarButton, {
|
|
284
|
+
onClick: function onClick() {
|
|
285
|
+
return editor === null || editor === void 0 ? void 0 : editor.chain().focus().toggleTextStyle({
|
|
286
|
+
lineHeight: '1.5'
|
|
287
|
+
}).run();
|
|
288
|
+
},
|
|
289
|
+
isActive: (_editorState$isSmall = editorState === null || editorState === void 0 ? void 0 : editorState.isSmall) !== null && _editorState$isSmall !== void 0 ? _editorState$isSmall : false
|
|
290
|
+
}, "\u884C\u9AD81.5"), /*#__PURE__*/React.createElement(MenuBarButton, {
|
|
291
|
+
onClick: function onClick() {
|
|
292
|
+
return editor === null || editor === void 0 ? void 0 : editor.chain().focus().toggleTextStyle({
|
|
293
|
+
lineHeight: '2.0'
|
|
294
|
+
}).run();
|
|
295
|
+
},
|
|
296
|
+
isActive: (_editorState$isLarge = editorState === null || editorState === void 0 ? void 0 : editorState.isLarge) !== null && _editorState$isLarge !== void 0 ? _editorState$isLarge : false
|
|
297
|
+
}, "\u884C\u9AD82.0"), /*#__PURE__*/React.createElement(MenuBarButton, {
|
|
298
|
+
onClick: function onClick() {
|
|
299
|
+
return editor === null || editor === void 0 ? void 0 : editor.chain().focus().toggleTextStyle({
|
|
300
|
+
lineHeight: '4.0'
|
|
301
|
+
}).run();
|
|
302
|
+
},
|
|
303
|
+
isActive: (_editorState$isExtraL = editorState === null || editorState === void 0 ? void 0 : editorState.isExtraLarge) !== null && _editorState$isExtraL !== void 0 ? _editorState$isExtraL : false
|
|
304
|
+
}, "\u884C\u9AD84.0"), /*#__PURE__*/React.createElement(MenuBarButton, {
|
|
305
|
+
onClick: function onClick() {
|
|
306
|
+
return editor === null || editor === void 0 ? void 0 : editor.chain().focus().unsetLineHeight().run();
|
|
307
|
+
}
|
|
308
|
+
}, "\u53D6\u6D88\u884C\u9AD8"), /*#__PURE__*/React.createElement(MenuBarButton, {
|
|
309
|
+
onClick: function onClick(e) {
|
|
310
|
+
e.preventDefault();
|
|
311
|
+
editor === null || editor === void 0 || editor.chain().focus().toggleBulletList().run();
|
|
312
|
+
},
|
|
313
|
+
isActive: (_editorState$isBullet = editorState === null || editorState === void 0 ? void 0 : editorState.isBulletList) !== null && _editorState$isBullet !== void 0 ? _editorState$isBullet : false
|
|
314
|
+
}, "\u5217\u8868"), /*#__PURE__*/React.createElement(MenuBarButton, {
|
|
315
|
+
onClick: function onClick(e) {
|
|
316
|
+
e.preventDefault();
|
|
317
|
+
editor === null || editor === void 0 || editor.chain().focus().toggleOrderedList().run();
|
|
318
|
+
},
|
|
319
|
+
isActive: (_editorState$isOrdere = editorState === null || editorState === void 0 ? void 0 : editorState.isOrderedList) !== null && _editorState$isOrdere !== void 0 ? _editorState$isOrdere : false
|
|
320
|
+
}, "\u6709\u5E8F\u5217\u8868"), /*#__PURE__*/React.createElement(MenuBarButton, {
|
|
321
|
+
onClick: function onClick(e) {
|
|
322
|
+
e.preventDefault();
|
|
323
|
+
editor === null || editor === void 0 || editor.chain().focus().toggleCodeBlock().run();
|
|
324
|
+
},
|
|
325
|
+
isActive: (_editorState$isCodeBl = editorState === null || editorState === void 0 ? void 0 : editorState.isCodeBlock) !== null && _editorState$isCodeBl !== void 0 ? _editorState$isCodeBl : false
|
|
326
|
+
}, "\u4EE3\u7801\u6BB5"), /*#__PURE__*/React.createElement(MenuBarButton, {
|
|
327
|
+
onClick: function onClick(e) {
|
|
328
|
+
e.preventDefault();
|
|
329
|
+
editor === null || editor === void 0 || editor.chain().focus().toggleBlockquote().run();
|
|
330
|
+
},
|
|
331
|
+
isActive: (_editorState$isBlockq = editorState === null || editorState === void 0 ? void 0 : editorState.isBlockquote) !== null && _editorState$isBlockq !== void 0 ? _editorState$isBlockq : false
|
|
332
|
+
}, "\u5F15\u7528"), /*#__PURE__*/React.createElement(MenuBarButton, {
|
|
333
|
+
disabled: uploading
|
|
334
|
+
}, uploading ? '上传中...' : '图片', /*#__PURE__*/React.createElement(MenuBarInput, {
|
|
335
|
+
type: "file",
|
|
336
|
+
accept: "image/*",
|
|
337
|
+
onChange: handleImageUpload
|
|
338
|
+
})), /*#__PURE__*/React.createElement(MenuBarButton, {
|
|
339
|
+
disabled: uploading
|
|
340
|
+
}, uploading ? '上传中...' : '视频', /*#__PURE__*/React.createElement(MenuBarInput, {
|
|
341
|
+
type: "file",
|
|
342
|
+
accept: "video/*",
|
|
343
|
+
onChange: handleVideoUpload
|
|
344
|
+
})), /*#__PURE__*/React.createElement(MenuBarColorInput, {
|
|
345
|
+
type: "color",
|
|
346
|
+
value: (_editorState$color = editorState === null || editorState === void 0 ? void 0 : editorState.color) !== null && _editorState$color !== void 0 ? _editorState$color : '',
|
|
347
|
+
onInput: function onInput(event) {
|
|
348
|
+
return editor === null || editor === void 0 ? void 0 : editor.chain().focus().setColor(event.currentTarget.value).run();
|
|
349
|
+
}
|
|
350
|
+
}), /*#__PURE__*/React.createElement(MenuBarButton, {
|
|
351
|
+
onClick: function onClick() {
|
|
352
|
+
return editor === null || editor === void 0 ? void 0 : editor.chain().focus().undo().run();
|
|
353
|
+
},
|
|
354
|
+
disabled: !(editorState !== null && editorState !== void 0 && editorState.canUndo)
|
|
355
|
+
}, "\u64A4\u9500"), /*#__PURE__*/React.createElement(MenuBarButton, {
|
|
356
|
+
onClick: function onClick() {
|
|
357
|
+
return editor === null || editor === void 0 ? void 0 : editor.chain().focus().redo().run();
|
|
358
|
+
},
|
|
359
|
+
disabled: !(editorState !== null && editorState !== void 0 && editorState.canRedo)
|
|
360
|
+
}, "\u91CD\u505A")));
|
|
361
|
+
};
|
|
362
|
+
export default MenuBar;
|