tldraw
Version:
A tiny little drawing editor.
130 lines (129 loc) • 4.56 kB
JavaScript
;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
var DefaultRichTextToolbarContent_exports = {};
__export(DefaultRichTextToolbarContent_exports, {
DefaultRichTextToolbarContent: () => DefaultRichTextToolbarContent
});
module.exports = __toCommonJS(DefaultRichTextToolbarContent_exports);
var import_jsx_runtime = require("react/jsx-runtime");
var import_editor = require("@tldraw/editor");
var import_react = require("react");
var import_events = require("../../context/events");
var import_useTranslation = require("../../hooks/useTranslation/useTranslation");
var import_TldrawUiButtonIcon = require("../primitives/Button/TldrawUiButtonIcon");
var import_TldrawUiToolbar = require("../primitives/TldrawUiToolbar");
function DefaultRichTextToolbarContent({
textEditor,
onEditLinkStart
}) {
const trackEvent = (0, import_events.useUiEvents)();
const msg = (0, import_useTranslation.useTranslation)();
const source = "rich-text-menu";
const [_, set] = (0, import_react.useState)(0);
(0, import_react.useEffect)(
function forceUpdateWhenContentChanges() {
function forceUpdate() {
set((t) => t + 1);
}
textEditor.on("update", forceUpdate);
textEditor.on("selectionUpdate", forceUpdate);
},
[textEditor]
);
(0, import_react.useEffect)(() => {
function handleKeyDown(event) {
if (onEditLinkStart && (0, import_editor.isAccelKey)(event) && event.shiftKey && event.key === "k") {
event.preventDefault();
onEditLinkStart();
}
}
document.addEventListener("keydown", handleKeyDown);
return () => {
document.removeEventListener("keydown", handleKeyDown);
};
}, [onEditLinkStart]);
const actions = (0, import_react.useMemo)(() => {
function handleOp(name, op) {
if (!textEditor.view) return;
trackEvent("rich-text", { operation: name, source });
textEditor.chain().focus()[op]().run();
}
return [
// { name: 'heading', attrs: { level: 3 }, onSelect() { textEditor.chain().focus().toggleHeading({ level: 3}).run() }},
{
name: "bold",
onSelect() {
handleOp("bold", "toggleBold");
}
},
{
name: "italic",
onSelect() {
handleOp("bold", "toggleItalic");
}
},
// { name: 'underline', onSelect() { handleOp('underline', 'toggleUnderline') }},
// { name: 'strike', onSelect() { handleOp('strike', 'toggleStrike') }},
{
name: "code",
onSelect() {
handleOp("bold", "toggleCode");
}
},
onEditLinkStart ? {
name: "link",
onSelect() {
onEditLinkStart();
}
} : void 0,
// ? is this really optional?
{
name: "bulletList",
onSelect() {
handleOp("bulletList", "toggleBulletList");
}
},
{
name: "highlight",
onSelect() {
handleOp("bulletList", "toggleHighlight");
}
}
].filter(Boolean);
}, [textEditor, trackEvent, onEditLinkStart]);
return actions.map(({ name, attrs, onSelect }) => {
const isActive = textEditor.view ? textEditor.isActive(name, attrs) : false;
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_TldrawUiToolbar.TldrawUiToolbarButton,
{
title: msg(`tool.rich-text-${name}`),
"data-testid": `rich-text.${name}`,
type: "icon",
isActive,
onPointerDown: import_editor.preventDefault,
onClick: onSelect,
role: "option",
"aria-pressed": isActive,
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TldrawUiButtonIcon.TldrawUiButtonIcon, { small: true, icon: name })
},
name
);
});
}
//# sourceMappingURL=DefaultRichTextToolbarContent.js.map