Mirrors/notesnook
1
0
Fork 0
mirror of https://github.com/streetwriters/notesnook.git synced 2025-12-23 15:09:33 +01:00
Code Issues Packages Projects Releases Wiki Activity

chore: publish

Browse Source
This commit is contained in:
thecodrr
2022-07-09 19:26:25 +05:00
parent e76dd125d8
commit fd77b0d9b3
17 changed files with 171 additions and 139 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
packages/editor/dist/cjs/extensions/codeblock/component.js vendored
View File

@@ -43,7 +43,7 @@ function CodeblockComponent(props) {
core_1.refractor.register(syntax); core_1.refractor.register(syntax);
const preventUpdate = language === languageDefinition.filename; const preventUpdate = language === languageDefinition.filename;
updateAttributes({ updateAttributes({
language: languageDefinition.filename, language: languageDefinition.filename
}, { preventUpdate, addToHistory: false }); }, { preventUpdate, addToHistory: false });
}); });
})(); })();
@@ -51,13 +51,13 @@ function CodeblockComponent(props) {
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(rebass_1.Flex, Object.assign({ sx: { return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(rebass_1.Flex, Object.assign({ sx: {
flexDirection: "column", flexDirection: "column",
borderRadius: "default", borderRadius: "default",
overflow: "hidden", overflow: "hidden"
} }, { children: [(0, jsx_runtime_1.jsx)(rebass_1.Text, { ref: forwardRef, as: "pre", sx: { } }, { children: [(0, jsx_runtime_1.jsx)(rebass_1.Text, { ref: forwardRef, as: "pre", autoCorrect: "off", autoCapitalize: "none", sx: {
"div, span.token, span.line-number-widget, span.line-number::before": { "div, span.token, span.line-number-widget, span.line-number::before": {
fontFamily: "monospace", fontFamily: "monospace",
fontSize: "code", fontSize: "code",
whiteSpace: "pre !important", whiteSpace: "pre !important",
tabSize: 1, tabSize: 1
}, },
position: "relative", position: "relative",
lineHeight: "20px", lineHeight: "20px",
@@ -67,24 +67,24 @@ function CodeblockComponent(props) {
display: "flex", display: "flex",
px: 2, px: 2,
pt: 2, pt: 2,
pb: 1, pb: 1
}, spellCheck: false }), (0, jsx_runtime_1.jsxs)(rebass_1.Flex, Object.assign({ ref: toolbarRef, contentEditable: false, sx: { }, spellCheck: false }), (0, jsx_runtime_1.jsxs)(rebass_1.Flex, Object.assign({ ref: toolbarRef, contentEditable: false, sx: {
bg: "codeBg", bg: "codeBg",
alignItems: "center", alignItems: "center",
justifyContent: "end", justifyContent: "flex-end",
borderTop: "1px solid var(--codeBorder)", borderTop: "1px solid var(--codeBorder)"
} }, { children: [caretPosition ? ((0, jsx_runtime_1.jsxs)(rebass_1.Text, Object.assign({ variant: "subBody", sx: { mr: 2, color: "codeFg" } }, { children: ["Line ", caretPosition.line, ", Column ", caretPosition.column, " ", caretPosition.selected } }, { children: [caretPosition ? ((0, jsx_runtime_1.jsxs)(rebass_1.Text, Object.assign({ variant: "subBody", sx: { mr: 2, color: "codeFg" } }, { children: ["Line ", caretPosition.line, ", Column ", caretPosition.column, " ", caretPosition.selected
? `(${caretPosition.selected} selected)` ? `(${caretPosition.selected} selected)`
: ""] }))) : null, (0, jsx_runtime_1.jsx)(button_1.Button, Object.assign({ variant: "icon", sx: { p: 1, mr: 1, ":hover": { bg: "codeSelection" } }, title: "Toggle indentation mode", onClick: () => { : ""] }))) : null, (0, jsx_runtime_1.jsx)(button_1.Button, Object.assign({ variant: "icon", sx: { p: 1, mr: 1, ":hover": { bg: "codeSelection" } }, title: "Toggle indentation mode", onClick: () => {
editor.commands.changeCodeBlockIndentation({ editor.commands.changeCodeBlockIndentation({
type: indentType === "space" ? "tab" : "space", type: indentType === "space" ? "tab" : "space",
amount: indentLength, amount: indentLength
}); });
} }, { children: (0, jsx_runtime_1.jsxs)(rebass_1.Text, Object.assign({ variant: "subBody", sx: { color: "codeFg" } }, { children: [indentType === "space" ? "Spaces" : "Tabs", ": ", indentLength] })) })), (0, jsx_runtime_1.jsx)(button_1.Button, Object.assign({ variant: "icon", sx: { } }, { children: (0, jsx_runtime_1.jsxs)(rebass_1.Text, Object.assign({ variant: "subBody", sx: { color: "codeFg" } }, { children: [indentType === "space" ? "Spaces" : "Tabs", ": ", indentLength] })) })), (0, jsx_runtime_1.jsx)(button_1.Button, Object.assign({ variant: "icon", sx: {
p: 1, p: 1,
mr: 1, mr: 1,
bg: isOpen ? "codeSelection" : "transparent", bg: isOpen ? "codeSelection" : "transparent",
":hover": { bg: "codeSelection" }, ":hover": { bg: "codeSelection" }
}, onClick: () => { }, onClick: () => {
setIsOpen(true); setIsOpen(true);
}, title: "Change language" }, { children: (0, jsx_runtime_1.jsx)(rebass_1.Text, Object.assign({ variant: "subBody", spellCheck: false, sx: { color: "codeFg" } }, { children: (languageDefinition === null || languageDefinition === void 0 ? void 0 : languageDefinition.title) || "Plaintext" })) }))] }))] })), (0, jsx_runtime_1.jsx)(responsive_1.ResponsivePresenter, Object.assign({ isOpen: isOpen, onClose: () => { }, title: "Change language" }, { children: (0, jsx_runtime_1.jsx)(rebass_1.Text, Object.assign({ variant: "subBody", spellCheck: false, sx: { color: "codeFg" } }, { children: (languageDefinition === null || languageDefinition === void 0 ? void 0 : languageDefinition.title) || "Plaintext" })) }))] }))] })), (0, jsx_runtime_1.jsx)(responsive_1.ResponsivePresenter, Object.assign({ isOpen: isOpen, onClose: () => {
@@ -101,7 +101,7 @@ function CodeblockComponent(props) {
align: "end", align: "end",
isTargetAbsolute: true, isTargetAbsolute: true,
location: "top", location: "top",
yOffset: 5, yOffset: 5
}, title: "Change code block language" }, { children: (0, jsx_runtime_1.jsx)(LanguageSelector, { selectedLanguage: (languageDefinition === null || languageDefinition === void 0 ? void 0 : languageDefinition.filename) || "Plaintext", onLanguageSelected: (language) => { }, title: "Change code block language" }, { children: (0, jsx_runtime_1.jsx)(LanguageSelector, { selectedLanguage: (languageDefinition === null || languageDefinition === void 0 ? void 0 : languageDefinition.filename) || "Plaintext", onLanguageSelected: (language) => {
updateAttributes({ language }, { addToHistory: true, preventUpdate: false }); updateAttributes({ language }, { addToHistory: true, preventUpdate: false });
setIsOpen(false); setIsOpen(false);
@@ -116,7 +116,7 @@ function LanguageSelector(props) {
height: 200, height: 200,
width: ["auto", 300], width: ["auto", 300],
overflowY: "auto", overflowY: "auto",
bg: "background", bg: "background"
} }, { children: [(0, jsx_runtime_1.jsx)(forms_1.Input, { onFocus: () => { } }, { children: [(0, jsx_runtime_1.jsx)(forms_1.Input, { onFocus: () => {
console.log("EHLLO!"); console.log("EHLLO!");
}, autoFocus: true, placeholder: "Search languages", sx: { }, autoFocus: true, placeholder: "Search languages", sx: {
@@ -126,7 +126,7 @@ function LanguageSelector(props) {
bg: "background", bg: "background",
mx: 2, mx: 2,
p: "7px", p: "7px",
zIndex: 999, zIndex: 999
}, onChange: (e) => { }, onChange: (e) => {
if (!e.target.value) if (!e.target.value)
return setLanguages(languages_json_1.default); return setLanguages(languages_json_1.default);
@@ -139,12 +139,12 @@ function LanguageSelector(props) {
} }), (0, jsx_runtime_1.jsx)(rebass_1.Flex, Object.assign({ sx: { } }), (0, jsx_runtime_1.jsx)(rebass_1.Flex, Object.assign({ sx: {
flexDirection: "column", flexDirection: "column",
pt: 1, pt: 1,
mt: 1, mt: 1
} }, { children: languages.map((lang) => ((0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ variant: "menuitem", sx: { } }, { children: languages.map((lang) => ((0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ variant: "menuitem", sx: {
textAlign: "left", textAlign: "left",
py: 1, py: 1,
display: "flex", display: "flex",
justifyContent: "space-between", justifyContent: "space-between",
alignItems: "center", alignItems: "center"
}, onClick: () => onLanguageSelected(lang.filename) }, { children: [(0, jsx_runtime_1.jsx)(rebass_1.Text, Object.assign({ variant: "body" }, { children: lang.title })), selectedLanguage === lang.filename ? ((0, jsx_runtime_1.jsx)(icon_1.Icon, { path: icons_1.Icons.check, size: "small" })) : lang.alias ? ((0, jsx_runtime_1.jsx)(rebass_1.Text, Object.assign({ variant: "subBody", sx: { fontSize: "10px" } }, { children: lang.alias.slice(0, 3).join(", ") }))) : null] }), lang.title))) }))] })) }))); }, onClick: () => onLanguageSelected(lang.filename) }, { children: [(0, jsx_runtime_1.jsx)(rebass_1.Text, Object.assign({ variant: "body" }, { children: lang.title })), selectedLanguage === lang.filename ? ((0, jsx_runtime_1.jsx)(icon_1.Icon, { path: icons_1.Icons.check, size: "small" })) : lang.alias ? ((0, jsx_runtime_1.jsx)(rebass_1.Text, Object.assign({ variant: "subBody", sx: { fontSize: "10px" } }, { children: lang.alias.slice(0, 3).join(", ") }))) : null] }), lang.title))) }))] })) })));
} }

2
packages/editor/dist/cjs/extensions/codeblock/highlighter.d.ts vendored
View File

@@ -2,7 +2,7 @@ import { Plugin } from "prosemirror-state";
import { DecorationSet } from "prosemirror-view"; import { DecorationSet } from "prosemirror-view";
import { AddMarkStep, RemoveMarkStep, ReplaceAroundStep, ReplaceStep } from "prosemirror-transform"; import { AddMarkStep, RemoveMarkStep, ReplaceAroundStep, ReplaceStep } from "prosemirror-transform";
export declare type MergedStep = AddMarkStep | RemoveMarkStep | ReplaceAroundStep | ReplaceStep; export declare type MergedStep = AddMarkStep | RemoveMarkStep | ReplaceAroundStep | ReplaceStep;
export declare function HighlighterPlugin({ name, defaultLanguage, }: { export declare function HighlighterPlugin({ name, defaultLanguage }: {
name: string; name: string;
defaultLanguage: string | null | undefined; defaultLanguage: string | null | undefined;
}): Plugin<DecorationSet>; }): Plugin<DecorationSet>;

21
packages/editor/dist/cjs/extensions/codeblock/highlighter.js vendored
View File

@@ -35,16 +35,17 @@ function getLineDecoration(from, line, total, isActive) {
const attributes = { const attributes = {
class: `line-number ${isActive ? "active" : ""}`, class: `line-number ${isActive ? "active" : ""}`,
"data-line": String(line).padEnd(maxLength, " "), "data-line": String(line).padEnd(maxLength, " "),
autocapitalize: "none"
}; };
const spec = { const spec = {
line: line, line: line,
active: isActive, active: isActive,
total, total,
from, from
}; };
return prosemirror_view_1.Decoration.inline(from, from + 1, attributes, spec); return prosemirror_view_1.Decoration.inline(from, from + 1, attributes, spec);
} }
function getDecorations({ doc, name, defaultLanguage, caretPosition, }) { function getDecorations({ doc, name, defaultLanguage, caretPosition }) {
const decorations = []; const decorations = [];
const languages = core_2.refractor.listLanguages(); const languages = core_2.refractor.listLanguages();
(0, core_1.findChildren)(doc, (node) => node.type.name === name).forEach((block) => { (0, core_1.findChildren)(doc, (node) => node.type.name === name).forEach((block) => {
@@ -67,7 +68,7 @@ function getDecorations({ doc, name, defaultLanguage, caretPosition, }) {
const to = from + node.text.length; const to = from + node.text.length;
if (node.classes.length) { if (node.classes.length) {
const decoration = prosemirror_view_1.Decoration.inline(from, to, { const decoration = prosemirror_view_1.Decoration.inline(from, to, {
class: node.classes.join(" "), class: node.classes.join(" ")
}); });
decorations.push(decoration); decorations.push(decoration);
} }
@@ -76,7 +77,7 @@ function getDecorations({ doc, name, defaultLanguage, caretPosition, }) {
}); });
return prosemirror_view_1.DecorationSet.create(doc, decorations); return prosemirror_view_1.DecorationSet.create(doc, decorations);
} }
function HighlighterPlugin({ name, defaultLanguage, }) { function HighlighterPlugin({ name, defaultLanguage }) {
const key = new prosemirror_state_1.PluginKey("highlighter"); const key = new prosemirror_state_1.PluginKey("highlighter");
return new prosemirror_state_1.Plugin({ return new prosemirror_state_1.Plugin({
key, key,
@@ -85,7 +86,7 @@ function HighlighterPlugin({ name, defaultLanguage, }) {
return getDecorations({ return getDecorations({
doc: state.doc, doc: state.doc,
name, name,
defaultLanguage, defaultLanguage
}); });
}, },
apply: (transaction, decorationSet, oldState, newState) => { apply: (transaction, decorationSet, oldState, newState) => {
@@ -120,17 +121,17 @@ function HighlighterPlugin({ name, defaultLanguage, }) {
doc: transaction.doc, doc: transaction.doc,
name, name,
defaultLanguage, defaultLanguage,
caretPosition: position, caretPosition: position
}); });
} }
decorationSet = getActiveLineDecorations(transaction.doc, decorationSet, position); decorationSet = getActiveLineDecorations(transaction.doc, decorationSet, position);
return decorationSet.map(transaction.mapping, transaction.doc); return decorationSet.map(transaction.mapping, transaction.doc);
}, }
}, },
props: { props: {
decorations(state) { decorations(state) {
return key.getState(state); return key.getState(state);
}, }
}, },
appendTransaction: (transactions, prevState, nextState) => { appendTransaction: (transactions, prevState, nextState) => {
const tr = nextState.tr; const tr = nextState.tr;
@@ -157,7 +158,7 @@ function HighlighterPlugin({ name, defaultLanguage, }) {
} }
}); });
return modified ? tr : null; return modified ? tr : null;
}, }
}); });
} }
exports.HighlighterPlugin = HighlighterPlugin; exports.HighlighterPlugin = HighlighterPlugin;
@@ -182,7 +183,7 @@ function getActiveLineDecorations(doc, decorations, position) {
decorations = decorations.remove(lineDecorations); decorations = decorations.remove(lineDecorations);
const newDecorations = []; const newDecorations = [];
for (const decoration of cloned) { for (const decoration of cloned) {
const { from, spec: { line, total }, } = decoration; const { from, spec: { line, total } } = decoration;
const isActive = line === (position === null || position === void 0 ? void 0 : position.line); const isActive = line === (position === null || position === void 0 ? void 0 : position.line);
const newDecoration = getLineDecoration(from, line, (position === null || position === void 0 ? void 0 : position.total) || total, isActive); const newDecoration = getLineDecoration(from, line, (position === null || position === void 0 ? void 0 : position.total) || total, isActive);
newDecorations.push(newDecoration); newDecorations.push(newDecoration);

46
packages/editor/dist/cjs/extensions/embed/component.js vendored
View File

@@ -7,29 +7,39 @@ const re_resizable_1 = require("re-resizable");
const react_1 = require("react"); const react_1 = require("react");
const responsive_1 = require("../../components/responsive"); const responsive_1 = require("../../components/responsive");
const toolbargroup_1 = require("../../toolbar/components/toolbargroup"); const toolbargroup_1 = require("../../toolbar/components/toolbargroup");
const toolbar_1 = require("../../toolbar");
function EmbedComponent(props) { function EmbedComponent(props) {
const { editor, updateAttributes, selected, node } = props; const { editor, updateAttributes, selected, node } = props;
const embedRef = (0, react_1.useRef)(); const embedRef = (0, react_1.useRef)();
const { src, width, height, align } = node.attrs; const { src, width, height, align } = node.attrs;
return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(rebass_1.Box, Object.assign({ sx: { return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(rebass_1.Box, Object.assign({ sx: {
display: "flex", display: "flex",
justifyContent: align === "center" ? "center" : align === "left" ? "start" : "end", justifyContent: align === "center" ? "center" : align === "left" ? "start" : "end"
} }, { children: (0, jsx_runtime_1.jsxs)(re_resizable_1.Resizable, Object.assign({ enable: { } }, { children: (0, jsx_runtime_1.jsxs)(re_resizable_1.Resizable, Object.assign({ enable: {
bottom: editor.isEditable, bottom: false,
left: editor.isEditable, left: false,
right: editor.isEditable, right: false,
top: editor.isEditable, top: false,
bottomLeft: editor.isEditable, bottomLeft: false,
bottomRight: editor.isEditable, bottomRight: editor.isEditable && selected,
topLeft: editor.isEditable, topLeft: false,
topRight: editor.isEditable, topRight: false
}, size: { }, size: {
height: height || "auto", height: height || "auto",
width: width || "auto", width: width || "auto"
}, maxWidth: "100%", onResizeStop: (e, direction, ref, d) => { }, maxWidth: "100%", handleComponent: {
bottomRight: ((0, jsx_runtime_1.jsx)(toolbar_1.Icon, { sx: {
width: 25,
height: 25,
marginLeft: -17,
marginTop: "3px",
borderTopLeftRadius: "default",
borderBottomRightRadius: "default"
}, path: toolbar_1.Icons.resize, size: 25, color: "primary" }))
}, onResizeStop: (e, direction, ref, d) => {
updateAttributes({ updateAttributes({
width: ref.clientWidth, width: ref.clientWidth,
height: ref.clientHeight, height: ref.clientHeight
}, { addToHistory: true, preventUpdate: false }); }, { addToHistory: true, preventUpdate: false });
}, lockAspectRatio: true }, { children: [(0, jsx_runtime_1.jsx)(rebass_1.Flex, Object.assign({ width: "100%", sx: { }, lockAspectRatio: true }, { children: [(0, jsx_runtime_1.jsx)(rebass_1.Flex, Object.assign({ width: "100%", sx: {
position: "relative", position: "relative",
@@ -42,27 +52,27 @@ function EmbedComponent(props) {
borderColor: selected ? "border" : "bgSecondary", borderColor: selected ? "border" : "bgSecondary",
cursor: "pointer", cursor: "pointer",
":hover": { ":hover": {
borderColor: "border", borderColor: "border"
}, }
} }, { children: (0, jsx_runtime_1.jsx)(responsive_1.DesktopOnly, { children: selected && ((0, jsx_runtime_1.jsx)(rebass_1.Flex, Object.assign({ sx: { position: "relative", justifyContent: "end" } }, { children: (0, jsx_runtime_1.jsx)(rebass_1.Flex, Object.assign({ sx: { } }, { children: (0, jsx_runtime_1.jsx)(responsive_1.DesktopOnly, { children: selected && ((0, jsx_runtime_1.jsx)(rebass_1.Flex, Object.assign({ sx: { position: "relative", justifyContent: "end" } }, { children: (0, jsx_runtime_1.jsx)(rebass_1.Flex, Object.assign({ sx: {
position: "absolute", position: "absolute",
top: -40, top: -40,
mb: 2, mb: 2,
alignItems: "end", alignItems: "end"
} }, { children: (0, jsx_runtime_1.jsx)(toolbargroup_1.ToolbarGroup, { editor: editor, tools: [ } }, { children: (0, jsx_runtime_1.jsx)(toolbargroup_1.ToolbarGroup, { editor: editor, tools: [
"embedAlignLeft", "embedAlignLeft",
"embedAlignCenter", "embedAlignCenter",
"embedAlignRight", "embedAlignRight",
"embedProperties", "embedProperties"
], sx: { ], sx: {
boxShadow: "menu", boxShadow: "menu",
borderRadius: "default", borderRadius: "default",
bg: "background", bg: "background"
} }) })) }))) }) })), (0, jsx_runtime_1.jsx)(rebass_1.Box, Object.assign({ as: "iframe", ref: embedRef, src: src, width: "100%", height: "100%", sx: { } }) })) }))) }) })), (0, jsx_runtime_1.jsx)(rebass_1.Box, Object.assign({ as: "iframe", ref: embedRef, src: src, width: "100%", height: "100%", sx: {
border: selected border: selected
? "2px solid var(--primary)" ? "2px solid var(--primary)"
: "2px solid transparent", : "2px solid transparent",
borderRadius: "default", borderRadius: "default"
} }, props))] })) })) })); } }, props))] })) })) }));
} }
exports.EmbedComponent = EmbedComponent; exports.EmbedComponent = EmbedComponent;

45
packages/editor/dist/cjs/extensions/image/component.js vendored
View File

@@ -43,54 +43,63 @@ function ImageComponent(props) {
? "start" ? "start"
: "end", : "end",
":hover .drag-handle, :active .drag-handle": { ":hover .drag-handle, :active .drag-handle": {
opacity: 1, opacity: 1
}, }
} }, { children: (0, jsx_runtime_1.jsxs)(re_resizable_1.Resizable, Object.assign({ enable: { } }, { children: (0, jsx_runtime_1.jsxs)(re_resizable_1.Resizable, Object.assign({ enable: {
bottom: editor.isEditable, bottom: false,
left: editor.isEditable, left: false,
right: editor.isEditable, right: false,
top: editor.isEditable, top: false,
bottomLeft: editor.isEditable, bottomLeft: false,
bottomRight: editor.isEditable, bottomRight: editor.isEditable && selected,
topLeft: editor.isEditable, topLeft: false,
topRight: editor.isEditable, topRight: false
}, handleComponent: {
bottomRight: ((0, jsx_runtime_1.jsx)(icon_1.Icon, { sx: {
width: 25,
height: 25,
marginLeft: -17,
marginTop: -17,
borderTopLeftRadius: "default",
borderBottomRightRadius: "default"
}, path: icons_1.Icons.resize, size: 25, color: "primary" }))
}, style: { }, style: {
position: "relative", position: "relative",
float: float ? (align === "left" ? "left" : "right") : "none", float: float ? (align === "left" ? "left" : "right") : "none"
}, size: { }, size: {
height: height || "auto", height: height || "auto",
width: width || "auto", width: width || "auto"
}, maxWidth: "100%", onResizeStop: (e, direction, ref, d) => { }, maxWidth: "100%", onResizeStop: (e, direction, ref, d) => {
updateAttributes({ updateAttributes({
width: ref.clientWidth, width: ref.clientWidth,
height: ref.clientHeight, height: ref.clientHeight
}, { addToHistory: true, preventUpdate: false }); }, { addToHistory: true, preventUpdate: false });
}, lockAspectRatio: true }, { children: [(0, jsx_runtime_1.jsx)(responsive_1.DesktopOnly, { children: selected && ((0, jsx_runtime_1.jsx)(rebass_1.Flex, Object.assign({ sx: { position: "relative", justifyContent: "end" } }, { children: (0, jsx_runtime_1.jsx)(rebass_1.Flex, Object.assign({ sx: { }, lockAspectRatio: true }, { children: [(0, jsx_runtime_1.jsx)(responsive_1.DesktopOnly, { children: selected && ((0, jsx_runtime_1.jsx)(rebass_1.Flex, Object.assign({ sx: { position: "relative", justifyContent: "end" } }, { children: (0, jsx_runtime_1.jsx)(rebass_1.Flex, Object.assign({ sx: {
position: "absolute", position: "absolute",
top: -40, top: -40,
mb: 2, mb: 2,
alignItems: "end", alignItems: "end"
} }, { children: (0, jsx_runtime_1.jsx)(toolbargroup_1.ToolbarGroup, { editor: editor, tools: [ } }, { children: (0, jsx_runtime_1.jsx)(toolbargroup_1.ToolbarGroup, { editor: editor, tools: [
"imageAlignLeft", "imageAlignLeft",
"imageAlignCenter", "imageAlignCenter",
"imageAlignRight", "imageAlignRight",
"imageProperties", "imageProperties"
], sx: { ], sx: {
boxShadow: "menu", boxShadow: "menu",
borderRadius: "default", borderRadius: "default",
bg: "background", bg: "background"
} }) })) }))) }), selected && ((0, jsx_runtime_1.jsx)(icon_1.Icon, { className: "drag-handle", "data-drag-handle": true, draggable: true, path: icons_1.Icons.dragHandle, sx: { } }) })) }))) }), selected && ((0, jsx_runtime_1.jsx)(icon_1.Icon, { className: "drag-handle", "data-drag-handle": true, draggable: true, path: icons_1.Icons.dragHandle, sx: {
cursor: "grab", cursor: "grab",
position: "absolute", position: "absolute",
top: 2, top: 2,
left: 2, left: 2,
zIndex: 999, zIndex: 999
} })), (0, jsx_runtime_1.jsx)(rebass_1.Image, Object.assign({ "data-drag-image": true, ref: imageRef, alt: alt, src: "/placeholder.svg", title: title, width: "100%", height: "100%", sx: { } })), (0, jsx_runtime_1.jsx)(rebass_1.Image, Object.assign({ "data-drag-image": true, ref: imageRef, alt: alt, src: "/placeholder.svg", title: title, width: "100%", height: "100%", sx: {
bg: "bgSecondary", bg: "bgSecondary",
border: selected border: selected
? "2px solid var(--primary)" ? "2px solid var(--primary)"
: "2px solid transparent", : "2px solid transparent",
borderRadius: "default", borderRadius: "default"
} }, props))] })) })) })); } }, props))] })) })) }));
} }
exports.ImageComponent = ImageComponent; exports.ImageComponent = ImageComponent;

8
packages/editor/dist/cjs/extensions/outlinelist/component.js vendored
View File

@@ -17,13 +17,13 @@ function OutlineListComponent(props) {
ul: { ul: {
display: collapsed ? "none" : "block", display: collapsed ? "none" : "block",
paddingInlineStart: 0, paddingInlineStart: 0,
paddingLeft: isNested ? 1 : 0, paddingLeft: 0,
marginBlockStart: isNested ? 5 : 0, marginBlockStart: isNested ? 5 : 0,
marginBlockEnd: 0, marginBlockEnd: 0
}, },
li: { li: {
listStyleType: "none", listStyleType: "none"
}, }
} }) })); } }) }));
} }
exports.OutlineListComponent = OutlineListComponent; exports.OutlineListComponent = OutlineListComponent;

36
packages/editor/dist/cjs/extensions/outlinelistitem/component.js vendored
View File

@@ -14,31 +14,35 @@ function OutlineListItemComponent(props) {
const isMobile = (0, toolbarstore_1.useIsMobile)(); const isMobile = (0, toolbarstore_1.useIsMobile)();
const isNested = ((_a = node.lastChild) === null || _a === void 0 ? void 0 : _a.type.name) === outlinelist_1.OutlineList.name; const isNested = ((_a = node.lastChild) === null || _a === void 0 ? void 0 : _a.type.name) === outlinelist_1.OutlineList.name;
const isCollapsed = isNested && ((_b = node.lastChild) === null || _b === void 0 ? void 0 : _b.attrs.collapsed); const isCollapsed = isNested && ((_b = node.lastChild) === null || _b === void 0 ? void 0 : _b.attrs.collapsed);
const onClick = () => {
const [subList] = (0, core_1.findChildren)(node, (node) => node.type.name === outlinelist_1.OutlineList.name);
if (!subList)
return;
const { pos } = subList;
editor.commands.toggleOutlineCollapse(pos + getPos() + 1, !isCollapsed);
};
return ((0, jsx_runtime_1.jsxs)(rebass_1.Flex, { children: [(0, jsx_runtime_1.jsxs)(rebass_1.Flex, Object.assign({ className: "outline", sx: { return ((0, jsx_runtime_1.jsxs)(rebass_1.Flex, { children: [(0, jsx_runtime_1.jsxs)(rebass_1.Flex, Object.assign({ className: "outline", sx: {
flexDirection: "column", flexDirection: "column",
alignItems: "center", alignItems: "center",
mt: isMobile ? "0px" : "3px", mt: isMobile ? "0px" : "3px"
} }, { children: [isNested ? ((0, jsx_runtime_1.jsx)(icon_1.Icon, { path: isCollapsed ? icons_1.Icons.chevronRight : icons_1.Icons.chevronDown, title: isCollapsed } }, { children: [isNested ? ((0, jsx_runtime_1.jsx)(icon_1.Icon, { path: isCollapsed ? icons_1.Icons.chevronRight : icons_1.Icons.chevronDown, title: isCollapsed
? "Click to uncollapse list" ? "Click to uncollapse list"
: "Click to collapse list", sx: { : "Click to collapse list", sx: {
cursor: "pointer", cursor: "pointer",
transition: `all .2s ease-in-out`, transition: `all .2s ease-in-out`,
":hover": { ":hover": {
transform: ["unset", "scale(1.3)"], transform: ["unset", "scale(1.3)"]
}, },
":active": { ":active": {
transform: ["scale(1.3)", "unset"], transform: ["scale(1.3)", "unset"]
}, },
".icon:hover path": { ".icon:hover path": {
fill: "var(--checked) !important", fill: "var(--checked) !important"
}, }
}, size: isMobile ? 24 : 18, onMouseDown: (e) => e.preventDefault(), onClick: () => { }, size: isMobile ? 24 : 18, onMouseDown: (e) => e.preventDefault(), onTouchEnd: (e) => {
const [subList] = (0, core_1.findChildren)(node, (node) => node.type.name === outlinelist_1.OutlineList.name); e.preventDefault();
if (!subList) onClick();
return; }, onClick: onClick })) : ((0, jsx_runtime_1.jsx)(icon_1.Icon, { path: icons_1.Icons.circle, size: isMobile ? 24 : 18, sx: { transform: "scale(0.4)" } })), isNested && !isCollapsed && ((0, jsx_runtime_1.jsx)(rebass_1.Box, { sx: {
const { pos } = subList;
editor.commands.toggleOutlineCollapse(pos + getPos() + 1, !isCollapsed);
} })) : ((0, jsx_runtime_1.jsx)(icon_1.Icon, { path: icons_1.Icons.circle, size: isMobile ? 24 : 18, sx: { transform: "scale(0.4)" } })), isNested && !isCollapsed && ((0, jsx_runtime_1.jsx)(rebass_1.Box, { sx: {
flex: 1, flex: 1,
width: 1, width: 1,
mt: 2, mt: 2,
@@ -49,12 +53,12 @@ function OutlineListItemComponent(props) {
transition: `all .2s ease-in-out`, transition: `all .2s ease-in-out`,
":hover": { ":hover": {
backgroundColor: "fontTertiary", backgroundColor: "fontTertiary",
width: 4, width: 4
}, }
}, contentEditable: false }))] })), (0, jsx_runtime_1.jsx)(rebass_1.Text, { ref: forwardRef, sx: { }, contentEditable: false }))] })), (0, jsx_runtime_1.jsx)(rebass_1.Text, { ref: forwardRef, sx: {
pl: 2, pl: 1,
listStyleType: "none", listStyleType: "none",
flex: 1, flex: 1
} })] })); } })] }));
} }
exports.OutlineListItemComponent = OutlineListItemComponent; exports.OutlineListItemComponent = OutlineListItemComponent;

25
packages/editor/dist/cjs/extensions/taskitem/component.js vendored
View File

@@ -28,8 +28,8 @@ function TaskItemComponent(props) {
bg: "background", bg: "background",
borderRadius: "default", borderRadius: "default",
":hover > .dragHandle": { ":hover > .dragHandle": {
opacity: editor.isEditable ? 1 : 0, opacity: editor.isEditable ? 1 : 0
}, }
} }, { children: [(0, jsx_runtime_1.jsx)(icon_1.Icon, { className: "dragHandle", draggable: "true", "data-drag-handle": true, path: icons_1.Icons.dragHandle, sx: { } }, { children: [(0, jsx_runtime_1.jsx)(icon_1.Icon, { className: "dragHandle", draggable: "true", "data-drag-handle": true, path: icons_1.Icons.dragHandle, sx: {
opacity: [1, 1, 0], opacity: [1, 1, 0],
alignSelf: "start", alignSelf: "start",
@@ -37,8 +37,8 @@ function TaskItemComponent(props) {
bg: "transparent", bg: "transparent",
cursor: "grab", cursor: "grab",
".icon:hover path": { ".icon:hover path": {
fill: "var(--checked) !important", fill: "var(--checked) !important"
}, }
}, size: isMobile ? 24 : 20 }), (0, jsx_runtime_1.jsx)(icon_1.Icon, { path: checked ? icons_1.Icons.check : "", stroke: "1px", sx: { }, size: isMobile ? 24 : 20 }), (0, jsx_runtime_1.jsx)(icon_1.Icon, { path: checked ? icons_1.Icons.check : "", stroke: "1px", sx: {
border: "2px solid", border: "2px solid",
borderColor: checked ? "checked" : "icon", borderColor: checked ? "checked" : "icon",
@@ -48,18 +48,23 @@ function TaskItemComponent(props) {
p: "1px", p: "1px",
cursor: editor.isEditable ? "pointer" : "unset", cursor: editor.isEditable ? "pointer" : "unset",
":hover": { ":hover": {
borderColor: "checked", borderColor: "checked"
}, },
":hover .icon path": { ":hover .icon path": {
fill: "var(--checked) !important", fill: "var(--checked) !important"
}, }
}, onMouseDown: (e) => { }, onMouseDown: (e) => {
e.preventDefault(); e.preventDefault();
toggle(); toggle();
}, onTouchEnd: (e) => {
e.preventDefault();
toggle();
}, color: checked ? "checked" : "icon", size: isMobile ? 16 : 14 }), (0, jsx_runtime_1.jsx)(rebass_1.Text, { as: "div", ref: forwardRef, sx: { }, color: checked ? "checked" : "icon", size: isMobile ? 16 : 14 }), (0, jsx_runtime_1.jsx)(rebass_1.Text, { as: "div", ref: forwardRef, sx: {
p: {
textDecorationLine: checked ? "line-through" : "none", textDecorationLine: checked ? "line-through" : "none",
opacity: checked ? 0.8 : 1, opacity: checked ? 0.8 : 1
flex: 1, },
flex: 1
} })] })) })); } })] })) }));
} }
exports.TaskItemComponent = TaskItemComponent; exports.TaskItemComponent = TaskItemComponent;
@@ -69,7 +74,7 @@ function toggleChildren(node, tr, toggleState, parentPos) {
// need to add 1 to get inside the node // need to add 1 to get inside the node
const actualPos = pos + parentPos + 1; const actualPos = pos + parentPos + 1;
tr.setNodeMarkup(actualPos, undefined, { tr.setNodeMarkup(actualPos, undefined, {
checked: toggleState, checked: toggleState
}); });
} }
return tr; return tr;

17
packages/editor/dist/cjs/extensions/tasklist/component.js vendored
View File

@@ -46,11 +46,11 @@ function TaskListComponent(props) {
}, [nested, node]); }, [nested, node]);
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(rebass_1.Flex, Object.assign({ sx: { return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(rebass_1.Flex, Object.assign({ sx: {
flexDirection: "column", flexDirection: "column",
":hover > div > .toggleSublist": { opacity: 1 }, ":hover > div > .toggleSublist": { opacity: 1 }
} }, { children: nested ? ((0, jsx_runtime_1.jsxs)(rebass_1.Flex, Object.assign({ sx: { } }, { children: nested ? ((0, jsx_runtime_1.jsxs)(rebass_1.Flex, Object.assign({ sx: {
position: "absolute", position: "absolute",
top: 0, top: 0,
right: 0, right: 0
}, contentEditable: false }, { children: [collapsed && ((0, jsx_runtime_1.jsxs)(rebass_1.Text, Object.assign({ variant: "body", sx: { color: "fontTertiary", mr: 35 } }, { children: [stats.checked, "/", stats.total] }))), (0, jsx_runtime_1.jsx)(icon_1.Icon, { className: "toggleSublist", path: collapsed ? icons_1.Icons.chevronDown : icons_1.Icons.chevronUp, sx: { }, contentEditable: false }, { children: [collapsed && ((0, jsx_runtime_1.jsxs)(rebass_1.Text, Object.assign({ variant: "body", sx: { color: "fontTertiary", mr: 35 } }, { children: [stats.checked, "/", stats.total] }))), (0, jsx_runtime_1.jsx)(icon_1.Icon, { className: "toggleSublist", path: collapsed ? icons_1.Icons.chevronDown : icons_1.Icons.chevronUp, sx: {
opacity: isMobile || collapsed ? 1 : 0, opacity: isMobile || collapsed ? 1 : 0,
position: "absolute", position: "absolute",
@@ -59,8 +59,8 @@ function TaskListComponent(props) {
mr: 2, mr: 2,
cursor: "pointer", cursor: "pointer",
".icon:hover path": { ".icon:hover path": {
fill: "var(--checked) !important", fill: "var(--checked) !important"
}, }
}, size: isMobile ? 24 : 20, onClick: () => { }, size: isMobile ? 24 : 20, onClick: () => {
updateAttributes({ collapsed: !collapsed }, { addToHistory: false, preventUpdate: true }); updateAttributes({ collapsed: !collapsed }, { addToHistory: false, preventUpdate: true });
} })] }))) : ((0, jsx_runtime_1.jsxs)(rebass_1.Flex, Object.assign({ sx: { } })] }))) : ((0, jsx_runtime_1.jsxs)(rebass_1.Flex, Object.assign({ sx: {
@@ -71,7 +71,7 @@ function TaskListComponent(props) {
mb: 2, mb: 2,
alignItems: "center", alignItems: "center",
justifyContent: "end", justifyContent: "end",
overflow: "hidden", overflow: "hidden"
}, contentEditable: false }, { children: [(0, jsx_runtime_1.jsx)(rebass_1.Box, { sx: { }, contentEditable: false }, { children: [(0, jsx_runtime_1.jsx)(rebass_1.Box, { sx: {
height: "100%", height: "100%",
width: `${stats.percentage}%`, width: `${stats.percentage}%`,
@@ -79,7 +79,7 @@ function TaskListComponent(props) {
bg: "border", bg: "border",
zIndex: 0, zIndex: 0,
left: 0, left: 0,
transition: "width 250ms ease-out", transition: "width 250ms ease-out"
} }), (0, jsx_runtime_1.jsx)(forms_1.Input, { readOnly: !editor.isEditable, value: title || "", variant: "clean", sx: { p: 0, px: 2, zIndex: 1, color: "fontTertiary" }, placeholder: "Untitled", onChange: (e) => { } }), (0, jsx_runtime_1.jsx)(forms_1.Input, { readOnly: !editor.isEditable, value: title || "", variant: "clean", sx: { p: 0, px: 2, zIndex: 1, color: "fontTertiary" }, placeholder: "Untitled", onChange: (e) => {
updateAttributes({ title: e.target.value }, { addToHistory: true, preventUpdate: false }); updateAttributes({ title: e.target.value }, { addToHistory: true, preventUpdate: false });
} }), (0, jsx_runtime_1.jsxs)(rebass_1.Flex, Object.assign({ sx: { flexShrink: 0, pr: 2 } }, { children: [(0, jsx_runtime_1.jsx)(icon_1.Icon, { path: icons_1.Icons.checkbox, size: 15, color: "fontTertiary" }), (0, jsx_runtime_1.jsxs)(rebass_1.Text, Object.assign({ variant: "body", sx: { ml: 1, color: "fontTertiary" } }, { children: [stats.checked, "/", stats.total] }))] }))] }))) })), (0, jsx_runtime_1.jsx)(rebass_1.Text, { as: "div", ref: forwardRef, sx: { } }), (0, jsx_runtime_1.jsxs)(rebass_1.Flex, Object.assign({ sx: { flexShrink: 0, pr: 2 } }, { children: [(0, jsx_runtime_1.jsx)(icon_1.Icon, { path: icons_1.Icons.checkbox, size: 15, color: "fontTertiary" }), (0, jsx_runtime_1.jsxs)(rebass_1.Text, Object.assign({ variant: "body", sx: { ml: 1, color: "fontTertiary" } }, { children: [stats.checked, "/", stats.total] }))] }))] }))) })), (0, jsx_runtime_1.jsx)(rebass_1.Text, { as: "div", ref: forwardRef, sx: {
@@ -88,12 +88,13 @@ function TaskListComponent(props) {
paddingInlineStart: 0, paddingInlineStart: 0,
marginBlockStart: nested ? 10 : 0, marginBlockStart: nested ? 10 : 0,
marginBlockEnd: 0, marginBlockEnd: 0,
marginLeft: nested ? -35 : 0
}, },
li: { li: {
listStyleType: "none", listStyleType: "none",
position: "relative", position: "relative",
marginBottom: [2, "7px"], marginBottom: [2, "7px"]
}, }
} })] })); } })] }));
} }
exports.TaskListComponent = TaskListComponent; exports.TaskListComponent = TaskListComponent;

4
packages/editor/dist/cjs/toolbar/components/icon.js vendored
View File

@@ -19,7 +19,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = __importDefault(require("@mdi/react")); const react_1 = __importDefault(require("@mdi/react"));
const rebass_1 = require("rebass"); const rebass_1 = require("rebass");
const toolbarstore_1 = require("../stores/toolbarstore"); const toolbarstore_1 = require("../stores/toolbarstore");
function MDIIconWrapper({ title, path, size = 24, color = "icon", stroke, rotate, }) { function MDIIconWrapper({ title, path, size = 24, color = "icon", stroke, rotate }) {
const theme = (0, toolbarstore_1.useTheme)(); const theme = (0, toolbarstore_1.useTheme)();
const themedColor = (theme === null || theme === void 0 ? void 0 : theme.colors) const themedColor = (theme === null || theme === void 0 ? void 0 : theme.colors)
? theme.colors[color] ? theme.colors[color]
@@ -28,7 +28,7 @@ function MDIIconWrapper({ title, path, size = 24, color = "icon", stroke, rotate
? `${(theme === null || theme === void 0 ? void 0 : theme.iconSizes[size]) || 24}px` ? `${(theme === null || theme === void 0 ? void 0 : theme.iconSizes[size]) || 24}px`
: `${size}px`, style: { : `${size}px`, style: {
strokeWidth: stroke || "0px", strokeWidth: stroke || "0px",
stroke: themedColor, stroke: themedColor
}, color: themedColor, spin: rotate })); }, color: themedColor, spin: rotate }));
} }
function Icon(props) { function Icon(props) {

1
packages/editor/dist/cjs/toolbar/icons.d.ts vendored
View File

@@ -93,6 +93,7 @@ export declare const Icons: {
chevronLeft: string; chevronLeft: string;
circle: string; circle: string;
arrowLeft: string; arrowLeft: string;
resize: string;
none: string; none: string;
}; };
export declare type IconNames = keyof typeof Icons; export declare type IconNames = keyof typeof Icons;

3
packages/editor/dist/cjs/toolbar/icons.js vendored
View File

@@ -97,5 +97,6 @@ exports.Icons = {
chevronLeft: js_1.mdiChevronLeft, chevronLeft: js_1.mdiChevronLeft,
circle: js_1.mdiCircle, circle: js_1.mdiCircle,
arrowLeft: js_1.mdiArrowLeft, arrowLeft: js_1.mdiArrowLeft,
none: "", resize: js_1.mdiResizeBottomRight,
none: ""
}; };

20
packages/editor/dist/cjs/toolbar/popups/tablepopup.js vendored
View File

@@ -18,11 +18,11 @@ function TablePopup(props) {
const { onInsertTable } = props; const { onInsertTable } = props;
const [cellLocation, setCellLocation] = (0, react_1.useState)({ const [cellLocation, setCellLocation] = (0, react_1.useState)({
column: 0, column: 0,
row: 0, row: 0
}); });
const [tableSize, setTableSize] = (0, react_1.useState)({ const [tableSize, setTableSize] = (0, react_1.useState)({
columns: MIN_COLUMNS, columns: MIN_COLUMNS,
rows: MIN_ROWS, rows: MIN_ROWS
}); });
(0, react_1.useEffect)(() => { (0, react_1.useEffect)(() => {
if (!autoExpand) if (!autoExpand)
@@ -39,7 +39,7 @@ function TablePopup(props) {
: Math.min(old.columns + columnFactor, MAX_COLUMNS), : Math.min(old.columns + columnFactor, MAX_COLUMNS),
rows: isDecrease rows: isDecrease
? Math.max(row + rowFactor, MIN_ROWS) ? Math.max(row + rowFactor, MIN_ROWS)
: Math.min(old.rows + rowFactor, MAX_ROWS), : Math.min(old.rows + rowFactor, MAX_ROWS)
}; };
}); });
}, [cellLocation, autoExpand]); }, [cellLocation, autoExpand]);
@@ -50,14 +50,14 @@ function TablePopup(props) {
disabled: !cellLocation.column || !cellLocation.row, disabled: !cellLocation.column || !cellLocation.row,
onClick: () => onInsertTable({ onClick: () => onInsertTable({
columns: cellLocation.column, columns: cellLocation.column,
rows: cellLocation.row, rows: cellLocation.row
}), })
} }, { children: (0, jsx_runtime_1.jsxs)(rebass_1.Flex, Object.assign({ sx: { px: 1, pt: 1, flexDirection: "column", alignItems: "center" } }, { children: [(0, jsx_runtime_1.jsx)(rebass_1.Box, Object.assign({ sx: { } }, { children: (0, jsx_runtime_1.jsxs)(rebass_1.Flex, Object.assign({ sx: { px: 1, pt: 1, flexDirection: "column", alignItems: "center" } }, { children: [(0, jsx_runtime_1.jsx)(rebass_1.Box, Object.assign({ sx: {
display: "grid", display: "grid",
gridTemplateColumns: `repeat(${tableSize.columns}, minmax(${cellSize}px, 1fr))`, gridTemplateColumns: `repeat(${tableSize.columns}, minmax(${cellSize}px, 1fr))`,
gap: "small", gap: "small",
bg: "background", bg: "background",
width: "100%", width: "100%"
}, onTouchMove: (e) => { }, onTouchMove: (e) => {
const touch = e.touches.item(0); const touch = e.touches.item(0);
const element = document.elementFromPoint(touch.pageX, touch.pageY); const element = document.elementFromPoint(touch.pageX, touch.pageY);
@@ -74,21 +74,23 @@ function TablePopup(props) {
borderRadius: "small", borderRadius: "small",
bg: isCellHighlighted(index, cellLocation, tableSize) bg: isCellHighlighted(index, cellLocation, tableSize)
? "disabled" ? "disabled"
: "transparent", : "transparent"
}, onTouchStart: () => { }, onTouchStart: () => {
setCellLocation(getCellLocation(index, tableSize)); setCellLocation(getCellLocation(index, tableSize));
}, onMouseEnter: () => { }, onMouseEnter: () => {
setCellLocation(getCellLocation(index, tableSize)); setCellLocation(getCellLocation(index, tableSize));
}, onTouchEnd: (e) => {
e.preventDefault();
}, onClick: () => { }, onClick: () => {
onInsertTable({ onInsertTable({
columns: cellLocation.column, columns: cellLocation.column,
rows: cellLocation.row, rows: cellLocation.row
}); });
} }, index))) })), (0, jsx_runtime_1.jsxs)(rebass_1.Flex, Object.assign({ sx: { } }, index))) })), (0, jsx_runtime_1.jsxs)(rebass_1.Flex, Object.assign({ sx: {
display: ["flex", "none", "none"], display: ["flex", "none", "none"],
mt: 1, mt: 1,
alignItems: "center", alignItems: "center",
justifyContent: "center", justifyContent: "center"
} }, { children: [(0, jsx_runtime_1.jsx)(inlineinput_1.InlineInput, { containerProps: { sx: { mr: 1 } }, label: "columns", placeholder: `${cellLocation.column} columns`, type: "number", value: cellLocation.column, onChange: (e) => { } }, { children: [(0, jsx_runtime_1.jsx)(inlineinput_1.InlineInput, { containerProps: { sx: { mr: 1 } }, label: "columns", placeholder: `${cellLocation.column} columns`, type: "number", value: cellLocation.column, onChange: (e) => {
setCellLocation((l) => (Object.assign(Object.assign({}, l), { column: e.target.valueAsNumber || 0 }))); setCellLocation((l) => (Object.assign(Object.assign({}, l), { column: e.target.valueAsNumber || 0 })));
} }), (0, jsx_runtime_1.jsx)(inlineinput_1.InlineInput, { label: "rows", placeholder: `${cellLocation.row} rows`, type: "number", value: cellLocation.row, onChange: (e) => { } }), (0, jsx_runtime_1.jsx)(inlineinput_1.InlineInput, { label: "rows", placeholder: `${cellLocation.row} rows`, type: "number", value: cellLocation.row, onChange: (e) => {

2
packages/editor/dist/es/extensions/codeblock/highlighter.d.ts vendored
View File

@@ -2,7 +2,7 @@ import { Plugin } from "prosemirror-state";
import { DecorationSet } from "prosemirror-view"; import { DecorationSet } from "prosemirror-view";
import { AddMarkStep, RemoveMarkStep, ReplaceAroundStep, ReplaceStep } from "prosemirror-transform"; import { AddMarkStep, RemoveMarkStep, ReplaceAroundStep, ReplaceStep } from "prosemirror-transform";
export declare type MergedStep = AddMarkStep | RemoveMarkStep | ReplaceAroundStep | ReplaceStep; export declare type MergedStep = AddMarkStep | RemoveMarkStep | ReplaceAroundStep | ReplaceStep;
export declare function HighlighterPlugin({ name, defaultLanguage }: { export declare function HighlighterPlugin({ name, defaultLanguage, }: {
name: string; name: string;
defaultLanguage: string | null | undefined; defaultLanguage: string | null | undefined;
}): Plugin<DecorationSet>; }): Plugin<DecorationSet>;

23
packages/editor/dist/es/extensions/codeblock/highlighter.js vendored
View File

@@ -2,7 +2,7 @@ import { Plugin, PluginKey } from "prosemirror-state";
import { Decoration, DecorationSet } from "prosemirror-view"; import { Decoration, DecorationSet } from "prosemirror-view";
import { findChildren } from "@tiptap/core"; import { findChildren } from "@tiptap/core";
import { refractor } from "refractor/lib/core"; import { refractor } from "refractor/lib/core";
import { toCaretPosition, toCodeLines } from "./code-block"; import { toCaretPosition, toCodeLines, } from "./code-block";
function parseNodes(nodes, className = []) { function parseNodes(nodes, className = []) {
return nodes.reduce((result, node) => { return nodes.reduce((result, node) => {
if (node.type === "comment" || node.type === "doctype") if (node.type === "comment" || node.type === "doctype")
@@ -32,17 +32,16 @@ function getLineDecoration(from, line, total, isActive) {
const attributes = { const attributes = {
class: `line-number ${isActive ? "active" : ""}`, class: `line-number ${isActive ? "active" : ""}`,
"data-line": String(line).padEnd(maxLength, " "), "data-line": String(line).padEnd(maxLength, " "),
autocapitalize: "none"
}; };
const spec = { const spec = {
line: line, line: line,
active: isActive, active: isActive,
total, total,
from from,
}; };
return Decoration.inline(from, from + 1, attributes, spec); return Decoration.inline(from, from + 1, attributes, spec);
} }
function getDecorations({ doc, name, defaultLanguage, caretPosition }) { function getDecorations({ doc, name, defaultLanguage, caretPosition, }) {
const decorations = []; const decorations = [];
const languages = refractor.listLanguages(); const languages = refractor.listLanguages();
findChildren(doc, (node) => node.type.name === name).forEach((block) => { findChildren(doc, (node) => node.type.name === name).forEach((block) => {
@@ -65,7 +64,7 @@ function getDecorations({ doc, name, defaultLanguage, caretPosition }) {
const to = from + node.text.length; const to = from + node.text.length;
if (node.classes.length) { if (node.classes.length) {
const decoration = Decoration.inline(from, to, { const decoration = Decoration.inline(from, to, {
class: node.classes.join(" ") class: node.classes.join(" "),
}); });
decorations.push(decoration); decorations.push(decoration);
} }
@@ -74,7 +73,7 @@ function getDecorations({ doc, name, defaultLanguage, caretPosition }) {
}); });
return DecorationSet.create(doc, decorations); return DecorationSet.create(doc, decorations);
} }
export function HighlighterPlugin({ name, defaultLanguage }) { export function HighlighterPlugin({ name, defaultLanguage, }) {
const key = new PluginKey("highlighter"); const key = new PluginKey("highlighter");
return new Plugin({ return new Plugin({
key, key,
@@ -83,7 +82,7 @@ export function HighlighterPlugin({ name, defaultLanguage }) {
return getDecorations({ return getDecorations({
doc: state.doc, doc: state.doc,
name, name,
defaultLanguage defaultLanguage,
}); });
}, },
apply: (transaction, decorationSet, oldState, newState) => { apply: (transaction, decorationSet, oldState, newState) => {
@@ -118,17 +117,17 @@ export function HighlighterPlugin({ name, defaultLanguage }) {
doc: transaction.doc, doc: transaction.doc,
name, name,
defaultLanguage, defaultLanguage,
caretPosition: position caretPosition: position,
}); });
} }
decorationSet = getActiveLineDecorations(transaction.doc, decorationSet, position); decorationSet = getActiveLineDecorations(transaction.doc, decorationSet, position);
return decorationSet.map(transaction.mapping, transaction.doc); return decorationSet.map(transaction.mapping, transaction.doc);
} },
}, },
props: { props: {
decorations(state) { decorations(state) {
return key.getState(state); return key.getState(state);
} },
}, },
appendTransaction: (transactions, prevState, nextState) => { appendTransaction: (transactions, prevState, nextState) => {
const tr = nextState.tr; const tr = nextState.tr;
@@ -155,7 +154,7 @@ export function HighlighterPlugin({ name, defaultLanguage }) {
} }
}); });
return modified ? tr : null; return modified ? tr : null;
} },
}); });
} }
/** /**
@@ -179,7 +178,7 @@ function getActiveLineDecorations(doc, decorations, position) {
decorations = decorations.remove(lineDecorations); decorations = decorations.remove(lineDecorations);
const newDecorations = []; const newDecorations = [];
for (const decoration of cloned) { for (const decoration of cloned) {
const { from, spec: { line, total } } = decoration; const { from, spec: { line, total }, } = decoration;
const isActive = line === (position === null || position === void 0 ? void 0 : position.line); const isActive = line === (position === null || position === void 0 ? void 0 : position.line);
const newDecoration = getLineDecoration(from, line, (position === null || position === void 0 ? void 0 : position.total) || total, isActive); const newDecoration = getLineDecoration(from, line, (position === null || position === void 0 ? void 0 : position.total) || total, isActive);
newDecorations.push(newDecoration); newDecorations.push(newDecoration);

2
packages/editor/dist/es/toolbar/components/toolbutton.d.ts vendored
View File

@@ -14,7 +14,7 @@ export declare type ToolButtonProps = ButtonProps & {
}; };
export declare const ToolButton: React.NamedExoticComponent<ButtonProps & { export declare const ToolButton: React.NamedExoticComponent<ButtonProps & {
icon: IconNames; icon: IconNames;
iconColor?: "background" | "border" | "text" | "blue" | "gray" | "green" | "orange" | "purple" | "red" | "yellow" | "checked" | "disabled" | "placeholder" | "icon" | "overlay" | "hover" | keyof import("@notesnook/theme/dist/theme/colorscheme/static").StaticColors | "primary" | "bgTransparent" | "accent" | "bgSecondary" | "bgSecondaryText" | "bgSecondaryHover" | "fontSecondary" | "fontTertiary" | "secondary" | undefined; iconColor?: "text" | "background" | "border" | "blue" | "gray" | "green" | "orange" | "purple" | "red" | "yellow" | "checked" | "disabled" | "placeholder" | "icon" | "overlay" | "primary" | "bgSecondary" | keyof import("@notesnook/theme/dist/theme/colorscheme/static").StaticColors | "bgTransparent" | "accent" | "bgSecondaryText" | "bgSecondaryHover" | "hover" | "fontSecondary" | "fontTertiary" | "secondary" | undefined;
iconSize?: number | "small" | "big" | "medium" | undefined; iconSize?: number | "small" | "big" | "medium" | undefined;
toggled: boolean; toggled: boolean;
buttonRef?: React.MutableRefObject<HTMLButtonElement | null | undefined> | undefined; buttonRef?: React.MutableRefObject<HTMLButtonElement | null | undefined> | undefined;

25
packages/editor/src/extensions/code-block/highlighter.ts
View File

@@ -8,14 +8,14 @@ import {
AddMarkStep, AddMarkStep,
RemoveMarkStep, RemoveMarkStep,
ReplaceAroundStep, ReplaceAroundStep,
ReplaceStep ReplaceStep,
} from "prosemirror-transform"; } from "prosemirror-transform";
import { import {
CaretPosition, CaretPosition,
CodeBlockAttributes, CodeBlockAttributes,
getLines, getLines,
toCaretPosition, toCaretPosition,
toCodeLines toCodeLines,
} from "./code-block"; } from "./code-block";
export type MergedStep = export type MergedStep =
@@ -64,13 +64,12 @@ function getLineDecoration(
const attributes = { const attributes = {
class: `line-number ${isActive ? "active" : ""}`, class: `line-number ${isActive ? "active" : ""}`,
"data-line": String(line).padEnd(maxLength, " "), "data-line": String(line).padEnd(maxLength, " "),
autocapitalize: "none"
}; };
const spec: any = { const spec: any = {
line: line, line: line,
active: isActive, active: isActive,
total, total,
from from,
}; };
return Decoration.inline(from, from + 1, attributes, spec); return Decoration.inline(from, from + 1, attributes, spec);
@@ -80,7 +79,7 @@ function getDecorations({
doc, doc,
name, name,
defaultLanguage, defaultLanguage,
caretPosition caretPosition,
}: { }: {
caretPosition?: CaretPosition; caretPosition?: CaretPosition;
doc: ProsemirrorNode; doc: ProsemirrorNode;
@@ -116,7 +115,7 @@ function getDecorations({
const to = from + node.text.length; const to = from + node.text.length;
if (node.classes.length) { if (node.classes.length) {
const decoration = Decoration.inline(from, to, { const decoration = Decoration.inline(from, to, {
class: node.classes.join(" ") class: node.classes.join(" "),
}); });
decorations.push(decoration); decorations.push(decoration);
} }
@@ -129,7 +128,7 @@ function getDecorations({
export function HighlighterPlugin({ export function HighlighterPlugin({
name, name,
defaultLanguage defaultLanguage,
}: { }: {
name: string; name: string;
defaultLanguage: string | null | undefined; defaultLanguage: string | null | undefined;
@@ -143,7 +142,7 @@ export function HighlighterPlugin({
return getDecorations({ return getDecorations({
doc: state.doc, doc: state.doc,
name, name,
defaultLanguage defaultLanguage,
}); });
}, },
apply: ( apply: (
@@ -197,7 +196,7 @@ export function HighlighterPlugin({
doc: transaction.doc, doc: transaction.doc,
name, name,
defaultLanguage, defaultLanguage,
caretPosition: position caretPosition: position,
}); });
} }
@@ -208,13 +207,13 @@ export function HighlighterPlugin({
); );
return decorationSet.map(transaction.mapping, transaction.doc); return decorationSet.map(transaction.mapping, transaction.doc);
} },
}, },
props: { props: {
decorations(state) { decorations(state) {
return key.getState(state); return key.getState(state);
} },
}, },
appendTransaction: (transactions, prevState, nextState) => { appendTransaction: (transactions, prevState, nextState) => {
@@ -255,7 +254,7 @@ export function HighlighterPlugin({
); );
return modified ? tr : null; return modified ? tr : null;
} },
}); });
} }
@@ -293,7 +292,7 @@ function getActiveLineDecorations(
for (const decoration of cloned) { for (const decoration of cloned) {
const { const {
from, from,
spec: { line, total } spec: { line, total },
} = decoration; } = decoration;
const isActive = line === position?.line; const isActive = line === position?.line;