@wedevign/rich-markdown-editor - npm Package Compare versions

Comparing version 11.21.4 to 12.0.0

dist/commands/insertFiles.js

@@ -30,3 +30,3 @@ "use strict";
         return;
-    const { dictionary, uploadImage, onImageUploadStart, onImageUploadStop, onShowToast, } = options;
+    const { dictionary, uploadImage, onImageUploadStart, onImageUploadStop, onShowToast } = options;
     if (!uploadImage) {
@@ -49,4 +49,4 @@ console.warn("uploadImage callback must be defined to handle image uploads.");
                 pos,
-                replaceExisting: options.replaceExisting,
-            },
+                replaceExisting: options.replaceExisting
+            }
         });
@@ -78,3 +78,3 @@ view.dispatch(tr);
             const transaction = view.state.tr.setMeta(uploadPlaceholder_1.default, {
-                remove: { id },
+                remove: { id }
             });
@@ -81,0 +81,0 @@ view.dispatch(transaction);

dist/commands/toggleBlockType.js

@@ -6,4 +6,49 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const prosemirror_commands_1 = require("prosemirror-commands");
+const prosemirror_model_1 = require("prosemirror-model");
+const prosemirror_transform_1 = require("prosemirror-transform");
 const isNodeActive_1 = __importDefault(require("../queries/isNodeActive"));
+function canChangeType(doc, pos, type) {
+    const $pos = doc.resolve(pos), index = $pos.index();
+    return $pos.parent.canReplaceWith(index, index + 1, type);
+}
+function setBlockType2(from, to = from, type, attrs) {
+    if (!type.isTextblock)
+        throw new RangeError("Type given to setBlockType should be a textblock");
+    const mapFrom = this.steps.length;
+    this.doc.nodesBetween(from, to, (node, pos) => {
+        if (node.isTextblock &&
+            !node.hasMarkup(type, attrs) &&
+            canChangeType(this.doc, this.mapping.slice(mapFrom).map(pos), type)) {
+            this.clearIncompatible(this.mapping.slice(mapFrom).map(pos, 1), type);
+            const mapping = this.mapping.slice(mapFrom);
+            const startM = mapping.map(pos, 1), endM = mapping.map(pos + node.nodeSize, 1);
+            this.step(new prosemirror_transform_1.ReplaceAroundStep(startM, endM, startM + 1, endM - 1, new prosemirror_model_1.Slice(prosemirror_model_1.Fragment.from(type.create(attrs, null, node.marks)), 0, 0), 1, true));
+            return false;
+        }
+    });
+    return this;
+}
+function setBlockType(nodeType, attrs = {}) {
+    return function (state, dispatch) {
+        const { from, to } = state.selection;
+        let applicable = false;
+        state.doc.nodesBetween(from, to, (node, pos) => {
+            if (applicable)
+                return false;
+            if (!node.isTextblock || node.hasMarkup(nodeType, attrs))
+                return;
+            if (node.type === nodeType) {
+                applicable = true;
+            }
+            else {
+                const $pos = state.doc.resolve(pos), index = $pos.index();
+                applicable = $pos.parent.canReplaceWith(index, index + 1, nodeType);
+            }
+        });
+        if (!applicable)
+            return false;
+        dispatch(setBlockType2.call(state.tr, from, to, nodeType, attrs).scrollIntoView());
+        return true;
+    };
+}
 function toggleBlockType(type, toggleType, attrs = {}) {
@@ -13,5 +58,5 @@ return (state, dispatch) => {
         if (isActive) {
-            return prosemirror_commands_1.setBlockType(toggleType)(state, dispatch);
+            return setBlockType(toggleType)(state, dispatch);
         }
-        return prosemirror_commands_1.setBlockType(type, attrs)(state, dispatch);
+        return setBlockType(type, attrs)(state, dispatch);
     };
@@ -18,0 +63,0 @@ }

dist/components/BlockMenu.d.ts

 import React from "react";
-import { Props } from "./CommandMenu";
-declare type BlockMenuProps = Omit<Props, "renderMenuItem" | "items" | "onClearSearch"> & Required<Pick<Props, "onLinkToolbarOpen" | "embeds">>;
+import { Props } from "./KnowtCommandMenu";
+import { GroupMenuItem } from "../types";
+declare type BlockMenuProps = Omit<Props, "renderMenuItem" | "renderGroupMenuItem" | "allGroups" | "visibleGroups" | "onClearSearch"> & Required<Pick<Props, "onLinkToolbarOpen" | "embeds">>;
 declare class BlockMenu extends React.Component<BlockMenuProps> {
-    get items(): import("../types").MenuItem[];
-    clearSearch: () => void;
+    get groupedItems(): GroupMenuItem[];
+    get embedsGroup(): GroupMenuItem;
+    get allGroups(): GroupMenuItem[];
+    get visibleGroups(): GroupMenuItem[];
+    clearSearch: (clearLength?: number) => void;
     render(): JSX.Element;
@@ -8,0 +12,0 @@ }

dist/components/BlockMenu.js

@@ -8,23 +8,38 @@ "use strict";
 const prosemirror_utils_1 = require("prosemirror-utils");
-const CommandMenu_1 = __importDefault(require("./CommandMenu"));
+const KnowtCommandMenu_1 = __importDefault(require("./KnowtCommandMenu"));
 const BlockMenuItem_1 = __importDefault(require("./BlockMenuItem"));
-const block_1 = __importDefault(require("../menus/block"));
+const BlockGroupMenuItem_1 = __importDefault(require("./BlockGroupMenuItem"));
+const block_1 = require("../menus/block");
 class BlockMenu extends react_1.default.Component {
     constructor() {
         super(...arguments);
-        this.clearSearch = () => {
+        this.clearSearch = (clearLength = 0) => {
             const { state, dispatch } = this.props.view;
-            const parent = prosemirror_utils_1.findParentNode(node => !!node)(state.selection);
+            const parent = prosemirror_utils_1.findParentNode((node) => !!node)(state.selection);
             if (parent) {
-                dispatch(state.tr.insertText("", parent.pos, state.selection.to));
+                const deleteFrom = Math.max(parent.pos, state.selection.to - clearLength);
+                dispatch(state.tr.insertText("", deleteFrom, state.selection.to));
             }
         };
     }
-    get items() {
-        return block_1.default(this.props.dictionary);
+    get groupedItems() {
+        return block_1.getGroupedMenuItems(this.props.view, this.props.dictionary);
     }
+    get embedsGroup() {
+        return block_1.getEmbedsGroup(this.props.embeds);
+    }
+    get allGroups() {
+        return [...this.groupedItems, this.embedsGroup];
+    }
+    get visibleGroups() {
+        return this.allGroups
+            .map((group) => (Object.assign(Object.assign({}, group), { items: group.items.filter(({ defaultHidden }) => !defaultHidden) })))
+            .filter(({ items }) => items.length > 0);
+    }
     render() {
-        return (react_1.default.createElement(CommandMenu_1.default, Object.assign({}, this.props, { filterable: true, onClearSearch: this.clearSearch, renderMenuItem: (item, _index, options) => {
-                return (react_1.default.createElement(BlockMenuItem_1.default, { onClick: options.onClick, selected: options.selected, icon: item.icon, title: item.title, shortcut: item.shortcut }));
-            }, items: this.items })));
+        return (react_1.default.createElement(KnowtCommandMenu_1.default, Object.assign({}, this.props, { filterable: true, onClearSearch: this.clearSearch, allGroups: this.allGroups, visibleGroups: this.visibleGroups, renderMenuItem: (item, _index, innerRef, options) => {
+                return (react_1.default.createElement(BlockMenuItem_1.default, { key: item.title, innerRef: innerRef, onClick: options.onClick, selected: options.selected, icon: item.icon, iconSVGProps: item.iconSVGProps, title: item.title, shortcut: item.shortcut, mainSearchKeyword: item.searchKeyword }));
+            }, renderGroupMenuItem: (item, _index, innerRef, options) => {
+                return (react_1.default.createElement(BlockGroupMenuItem_1.default, { innerRef: innerRef, key: item.groupData.name, title: item.groupData.name, selected: options.selected, onClick: options.onClick }));
+            } })));
     }
@@ -31,0 +46,0 @@ }

dist/components/BlockMenuItem.d.ts

@@ -9,7 +9,10 @@ import * as React from "react";
     icon?: typeof React.Component | React.FC<any>;
+    iconSVGProps?: any;
+    innerRef?: (ref: HTMLDivElement) => void;
     title: React.ReactNode;
     shortcut?: string;
     containerId?: string;
+    mainSearchKeyword?: string;
 };
-declare const _default: React.ForwardRefExoticComponent<Pick<Props, "disabled" | "title" | "icon" | "onClick" | "selected" | "shortcut" | "containerId"> & {
+declare const _default: React.ForwardRefExoticComponent<Pick<Props, "disabled" | "title" | "icon" | "onClick" | "selected" | "iconSVGProps" | "innerRef" | "mainSearchKeyword" | "containerId" | "shortcut"> & {
     theme?: any;
@@ -16,0 +19,0 @@ }>;

dist/components/BlockMenuItem.js

@@ -28,6 +28,6 @@ "use strict";
 const styled_components_1 = __importStar(require("styled-components"));
-const theme_1 = __importDefault(require("../styles/theme"));
-function BlockMenuItem({ selected, disabled, onClick, title, shortcut, icon, containerId = "block-menu-container", }) {
+function BlockMenuItem({ selected, disabled, onClick, title, icon, iconSVGProps, innerRef, mainSearchKeyword, containerId = "block-menu-container", }) {
     const Icon = icon;
-    const ref = React.useCallback(node => {
+    const ref = React.useCallback((node) => {
+        innerRef === null || innerRef === void 0 ? void 0 : innerRef(node);
         if (selected && node) {
@@ -37,5 +37,3 @@ smooth_scroll_into_view_if_needed_1.default(node, {
                 block: "center",
-                boundary: parent => {
-                    return parent.id !== containerId;
-                },
+                boundary: (parent) => parent.id !== containerId,
             });
@@ -45,7 +43,8 @@ }
     return (React.createElement(MenuItem, { selected: selected, onClick: disabled ? undefined : onClick, ref: ref },
-        Icon && (React.createElement(React.Fragment, null,
-            React.createElement(Icon, { color: selected ? theme_1.default.blockToolbarIconSelected : theme_1.default.blockToolbarIcon }),
-            "\u00A0\u00A0")),
-        title,
-        shortcut && React.createElement(Shortcut, null, shortcut)));
+        React.createElement(Group, null,
+            Icon && (React.createElement(React.Fragment, null,
+                React.createElement(Icon, Object.assign({ size: 20 }, iconSVGProps)),
+                "\u00A0\u00A0")),
+            React.createElement(Title, null, title)),
+        React.createElement(Group, null, mainSearchKeyword && (React.createElement(SearchKeyword, null, mainSearchKeyword)))));
 }
@@ -55,15 +54,15 @@ const MenuItem = styled_components_1.default.button `
   align-items: center;
-  justify-content: flex-start;
+  justify-content: space-between;
   font-weight: 500;
-  font-size: 14px;
+  font-size: 17px;
   line-height: 1;
   width: 100%;
-  height: 36px;
+  height: 40px;
   cursor: pointer;
   border: none;
-  opacity: ${props => (props.disabled ? ".5" : "1")};
-  color: ${props => props.selected
+  opacity: ${(props) => (props.disabled ? ".5" : "1")};
+  color: ${(props) => props.selected
     ? props.theme.blockToolbarTextSelected
     : props.theme.blockToolbarText};
-  background: ${props => props.selected
+  background: ${(props) => props.selected
     ? props.theme.blockToolbarSelectedBackground ||
@@ -77,4 +76,4 @@ props.theme.blockToolbarTrigger
   &:active {
-    color: ${props => props.theme.blockToolbarTextSelected};
-    background: ${props => props.selected
+    color: ${(props) => props.theme.blockToolbarTextSelected};
+    background: ${(props) => props.selected
     ? props.theme.blockToolbarSelectedBackground ||
@@ -85,8 +84,22 @@ props.theme.blockToolbarTrigger
 `;
-const Shortcut = styled_components_1.default.span `
-  color: ${props => props.theme.textSecondary};
-  flex-grow: 1;
-  text-align: right;
+const Group = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
 `;
+const Title = styled_components_1.default.span `
+  margin-right: 60px;
+`;
+const SearchKeyword = styled_components_1.default.span `
+  font-size: 12px;
+  font-weight: 600;
+  padding: 4px 6px;
+  border-radius: 5px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  color: ${(props) => props.theme.knowtGreen};
+  background-color: #ecf9f7;
+`;
 exports.default = styled_components_1.withTheme(BlockMenuItem);
 //# sourceMappingURL=BlockMenuItem.js.map

dist/components/CommandMenu.js

@@ -119,3 +119,3 @@ "use strict";
         };
-        this.insertItem = item => {
+        this.insertItem = (item) => {
             var _a, _b;
@@ -190,10 +190,10 @@ switch (item.name) {
         };
-        this.triggerLinkInput = item => {
+        this.triggerLinkInput = (item) => {
             this.setState({ insertItem: item });
         };
-        this.handleImagePicked = event => {
+        this.handleImagePicked = (event) => {
             const files = getDataTransferFiles_1.default(event);
             const { view, uploadImage, onImageUploadStart, onImageUploadStop, onShowToast, } = this.props;
             const { state } = view;
-            const parent = prosemirror_utils_1.findParentNode(node => !!node)(state.selection);
+            const parent = prosemirror_utils_1.findParentNode((node) => !!node)(state.selection);
             this.clearSearch();
@@ -340,3 +340,3 @@ if (!uploadImage) {
         }
-        const filtered = items.filter(item => {
+        const filtered = items.filter((item) => {
             if (item.name === "separator")
@@ -398,3 +398,3 @@ return true;
   width: 100%;
-  color: ${props => props.theme.blockToolbarText};
+  color: ${(props) => props.theme.blockToolbarText};
 `;
@@ -415,3 +415,3 @@ const List = styled_components_1.default.ol `
   align-items: center;
-  color: ${props => props.theme.textSecondary};
+  color: ${(props) => props.theme.textSecondary};
   font-weight: 500;
@@ -423,13 +423,12 @@ font-size: 14px;
 exports.Wrapper = styled_components_1.default.div `
-  color: ${props => props.theme.text};
-  font-family: ${props => props.theme.fontFamily};
+  color: ${(props) => props.theme.text};
+  font-family: ${(props) => props.theme.fontFamilyMono};
   position: absolute;
-  z-index: ${props => props.theme.zIndex + 100};
-  ${props => props.top !== undefined && `top: ${props.top}px`};
-  ${props => props.bottom !== undefined && `bottom: ${props.bottom}px`};
-  left: ${props => props.left}px;
-  background-color: ${props => props.theme.blockToolbarBackground};
-  border-radius: 4px;
-  box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px,
-    rgba(0, 0, 0, 0.08) 0px 4px 8px, rgba(0, 0, 0, 0.08) 0px 2px 4px;
+  z-index: ${(props) => props.theme.zIndex + 100};
+  ${(props) => props.top !== undefined && `top: ${props.top}px`};
+  ${(props) => props.bottom !== undefined && `bottom: ${props.bottom}px`};
+  left: ${(props) => props.left}px;
+  background-color: ${(props) => props.theme.blockToolbarBackground};
+  border-radius: 10px;
+  box-shadow: rgb(0 0 0 / 8%) 0px 0.4rem 1.6rem 0px;
   opacity: 0;
@@ -445,6 +444,5 @@ transform: scale(0.95);
   width: 300px;
-  max-height: 224px;
+  max-height: 246px;
   overflow: hidden;
   overflow-y: auto;
-
   * {
@@ -454,6 +452,18 @@ box-sizing: border-box;
 
+  &::-webkit-scrollbar {
+    background: transparent;
+    width: 6px;
+    height: 6px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    border-radius: 30px;
+    background-color: rgba(220, 220, 220, 0.6);
+  }
+
   hr {
     border: 0;
     height: 0;
-    border-top: 1px solid ${props => props.theme.blockToolbarDivider};
+    margin: 0;
+    border-top: 1px solid ${(props) => props.theme.blockToolbarDivider};
   }
@@ -460,0 +470,0 @@

dist/components/EmojiMenu.js

@@ -21,3 +21,6 @@ "use strict";
             const { state, dispatch } = this.props.view;
-            dispatch(state.tr.insertText("", state.selection.$from.pos - ((_a = this.props.search) !== null && _a !== void 0 ? _a : "").length - 1, state.selection.to));
+            const MENU_TRIGGER_LENGTH = 2;
+            dispatch(state.tr.insertText("", state.selection.$from.pos -
+                ((_a = this.props.search) !== null && _a !== void 0 ? _a : "").length -
+                MENU_TRIGGER_LENGTH, state.selection.to));
         };
@@ -28,3 +31,3 @@ }
         const n = search.toLowerCase();
-        const result = searcher.search(n).map(item => {
+        const result = searcher.search(n).map((item) => {
             const description = item.description;
@@ -31,0 +34,0 @@ const name = item.names[0];

dist/components/SelectionToolbar.js

@@ -74,3 +74,3 @@ "use strict";
     const nodes = fragment.content;
-    return some_1.default(nodes, n => n.content.size);
+    return some_1.default(nodes, (n) => n.content.size);
 }
@@ -179,9 +179,9 @@ class SelectionToolbar extends React.Component {
         else {
-            items = formatting_1.default(state, isTemplate, dictionary);
+            items = formatting_1.default(view, isTemplate, dictionary);
             isTextSelection = true;
         }
-        items = items.filter(item => {
+        items = items.filter((item) => {
             if (item.name === "separator")
                 return true;
-            if (item.name && !this.props.commands[item.name])
+            if (item.name && !item.customOnClick && !this.props.commands[item.name])
                 return false;
@@ -188,0 +188,0 @@ return true;

dist/components/ToolbarMenu.js

@@ -46,5 +46,12 @@ "use strict";
             const isActive = item.active ? item.active(state) : false;
-            return (React.createElement(ToolbarButton_1.default, { key: index, onClick: () => item.name && this.props.commands[item.name](item.attrs), active: isActive },
+            return (React.createElement(ToolbarButton_1.default, { key: index, active: isActive, onClick: () => {
+                    if (item.customOnClick) {
+                        return item.customOnClick();
+                    }
+                    if (!item.name)
+                        return;
+                    this.props.commands[item.name](item.attrs);
+                } },
                 React.createElement(Tooltip, { tooltip: item.tooltip, placement: "top" },
-                    React.createElement(Icon, { color: this.props.theme.toolbarItem }))));
+                    React.createElement(Icon, { color: item.iconColor || this.props.theme.toolbarItem }))));
         })));
@@ -51,0 +58,0 @@ }

dist/components/VisuallyHidden.js

@@ -9,4 +9,4 @@ "use strict";
   position: absolute !important;
-  height: 1px;
-  width: 1px;
+  height: 0px;
+  width: 0px;
   overflow: hidden;
@@ -13,0 +13,0 @@ clip: rect(1px 1px 1px 1px); /* IE6, IE7 */

dist/index.d.ts

@@ -5,3 +5,3 @@ import * as React from "react";
 import { EditorView } from "prosemirror-view";
-import { Schema, NodeSpec, MarkSpec } from "prosemirror-model";
+import { Schema, NodeSpec, MarkSpec, DOMParser } from "prosemirror-model";
 import { InputRule } from "prosemirror-inputrules";
@@ -16,3 +16,2 @@ import baseDictionary from "./dictionary";
 import { PluginSimple } from "markdown-it";
-export { schema, parser, serializer, renderToHtml } from "./server";
 export { default as Extension } from "./lib/Extension";
@@ -69,3 +68,3 @@ export declare const theme: {
     blockToolbarItem: string;
-    blockToolbarIcon: undefined;
+    blockToolbarIcon: string;
     blockToolbarIconSelected: string;
@@ -83,2 +82,3 @@ blockToolbarText: string;
     noticeWarningText: string;
+    black: string;
     almostBlack: string;
@@ -89,3 +89,2 @@ lightBlack: string;
     white10: string;
-    black: string;
     black10: string;
@@ -97,6 +96,19 @@ primary: string;
     greyDark: string;
+    knowtOffWhite: string;
+    knowtOffWhite2: string;
+    knowtGreen: string;
+    knowtGreyLight: string;
+    knowtGrey: string;
+    knowtGreyMid: string;
+    knowtGreyStrong: string;
+    highlights: {
+        red: string;
+        orange: string;
+        yellow: string;
+        green: string;
+        blue: string;
+    };
 };
 export declare type Props = {
     id?: string;
-    value?: string;
     defaultValue: string;
@@ -106,2 +118,3 @@ placeholder: string;
     disableExtensions?: ("strong" | "code_inline" | "highlight" | "em" | "link" | "placeholder" | "strikethrough" | "underline" | "blockquote" | "bullet_list" | "checkbox_item" | "checkbox_list" | "code_block" | "code_fence" | "embed" | "br" | "heading" | "hr" | "image" | "list_item" | "container_notice" | "ordered_list" | "paragraph" | "table" | "td" | "th" | "tr" | "emoji")[];
+    fontScale?: number;
     autoFocus?: boolean;
@@ -136,2 +149,3 @@ readOnly?: boolean;
     onClickHashtag?: (tag: string, event: MouseEvent) => void;
+    onGoToPreviousInput?: () => void;
     onKeyDown?: (event: React.KeyboardEvent<HTMLDivElement>) => void;
@@ -157,2 +171,3 @@ embeds: EmbedDescriptor[];
         dir: string;
+        fontScale: number;
         placeholder: string;
@@ -181,3 +196,4 @@ onImageUploadStart: () => void;
     serializer: MarkdownSerializer;
-    parser: MarkdownParser;
+    mdParser: MarkdownParser;
+    domParser: DOMParser;
     pasteParser: MarkdownParser;
@@ -212,3 +228,4 @@ plugins: Plugin[];
     createSerializer(): import("./lib/markdown/serializer").MarkdownSerializer;
-    createParser(): MarkdownParser<any>;
+    createMDParser(): MarkdownParser<any>;
+    createDOMParser(): DOMParser<Schema<any, any>>;
     createPasteParser(): MarkdownParser<any>;
@@ -220,4 +237,5 @@ createState(value?: string): EditorState<any>;
     calculateDir: () => void;
-    value: () => string;
+    getValue: () => string;
     handleChange: () => void;
+    handleGoToPreviousInput: () => void;
     handleSave: () => void;
@@ -236,2 +254,3 @@ handleSaveAndExit: () => void;
     handleSelectTable: (state: EditorState) => void;
+    forceUpdateContent: (newValue: string) => void;
     focusAtStart: () => void;
@@ -294,3 +313,3 @@ focusAtEnd: () => void;
         blockToolbarItem: string;
-        blockToolbarIcon: undefined;
+        blockToolbarIcon: string;
         blockToolbarIconSelected: string;
@@ -308,2 +327,3 @@ blockToolbarText: string;
         noticeWarningText: string;
+        black: string;
         almostBlack: string;
@@ -314,3 +334,2 @@ lightBlack: string;
         white10: string;
-        black: string;
         black10: string;
@@ -322,2 +341,16 @@ primary: string;
         greyDark: string;
+        knowtOffWhite: string;
+        knowtOffWhite2: string;
+        knowtGreen: string;
+        knowtGreyLight: string;
+        knowtGrey: string;
+        knowtGreyMid: string;
+        knowtGreyStrong: string;
+        highlights: {
+            red: string;
+            orange: string;
+            yellow: string;
+            green: string;
+            blue: string;
+        };
     };
@@ -324,0 +357,0 @@ dictionary: ((providedDictionary?: Partial<{

dist/index.js

@@ -25,3 +25,3 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.theme = exports.Extension = exports.renderToHtml = exports.serializer = exports.parser = exports.schema = void 0;
+exports.theme = exports.Extension = void 0;
 const React = __importStar(require("react"));
@@ -75,3 +75,7 @@ const memoize_1 = __importDefault(require("lodash/memoize"));
 const Code_1 = __importDefault(require("./marks/Code"));
-const Highlight_1 = __importDefault(require("./marks/Highlight"));
+const DefaultHighlight_1 = __importDefault(require("./marks/highlights/DefaultHighlight"));
+const OrangeHighlight_1 = __importDefault(require("./marks/highlights/OrangeHighlight"));
+const YellowHighlight_1 = __importDefault(require("./marks/highlights/YellowHighlight"));
+const GreenHighlight_1 = __importDefault(require("./marks/highlights/GreenHighlight"));
+const BlueHighlight_1 = __importDefault(require("./marks/highlights/BlueHighlight"));
 const Italic_1 = __importDefault(require("./marks/Italic"));
@@ -92,7 +96,4 @@ const Link_1 = __importDefault(require("./marks/Link"));
 const PasteHandler_1 = __importDefault(require("./plugins/PasteHandler"));
-var server_1 = require("./server");
-Object.defineProperty(exports, "schema", { enumerable: true, get: function () { return server_1.schema; } });
-Object.defineProperty(exports, "parser", { enumerable: true, get: function () { return server_1.parser; } });
-Object.defineProperty(exports, "serializer", { enumerable: true, get: function () { return server_1.serializer; } });
-Object.defineProperty(exports, "renderToHtml", { enumerable: true, get: function () { return server_1.renderToHtml; } });
+const domHelpers_1 = require("./domHelpers");
+const GoToPreviousInputTrigger_1 = __importDefault(require("./plugins/GoToPreviousInputTrigger"));
 var Extension_1 = require("./lib/Extension");
@@ -122,3 +123,3 @@ Object.defineProperty(exports, "Extension", { enumerable: true, get: function () { return __importDefault(Extension_1).default; } });
         };
-        this.value = () => {
+        this.getValue = () => {
             return this.serializer.serialize(this.view.state.doc);
@@ -130,5 +131,11 @@ };
             this.props.onChange(() => {
-                return this.value();
+                return this.getValue();
             });
         };
+        this.handleGoToPreviousInput = () => {
+            const { onGoToPreviousInput } = this.props;
+            if (onGoToPreviousInput) {
+                onGoToPreviousInput();
+            }
+        };
         this.handleSave = () => {
@@ -181,2 +188,6 @@ const { onSave } = this.props;
         };
+        this.forceUpdateContent = (newValue) => {
+            const newState = this.createState(newValue);
+            this.view.updateState(newState);
+        };
         this.focusAtStart = () => {
@@ -197,3 +208,3 @@ const selection = prosemirror_state_1.Selection.atStart(this.view.state.doc);
             const previouslySeen = {};
-            this.view.state.doc.forEach(node => {
+            this.view.state.doc.forEach((node) => {
                 if (node.type.name === "heading") {
@@ -236,6 +247,2 @@ const slug = headingToSlug_1.default(node);
     componentDidUpdate(prevProps) {
-        if (this.props.value && prevProps.value !== this.props.value) {
-            const newState = this.createState(this.props.value);
-            this.view.updateState(newState);
-        }
         if (prevProps.readOnly !== this.props.readOnly) {
@@ -283,3 +290,4 @@ this.view.update(Object.assign(Object.assign({}, this.view.props), { editable: () => !this.props.readOnly }));
         this.serializer = this.createSerializer();
-        this.parser = this.createParser();
+        this.mdParser = this.createMDParser();
+        this.domParser = this.createDOMParser();
         this.pasteParser = this.createPasteParser();
@@ -312,3 +320,5 @@ this.inputRules = this.createInputRules();
                 new BulletList_1.default(),
-                new Embed_1.default({ embeds: this.props.embeds }),
+                new Embed_1.default({
+                    embeds: this.props.embeds,
+                }),
                 new ListItem_1.default(),
@@ -342,3 +352,7 @@ new Notice_1.default({
                 new Code_1.default(),
-                new Highlight_1.default(),
+                new OrangeHighlight_1.default(),
+                new YellowHighlight_1.default(),
+                new BlueHighlight_1.default(),
+                new GreenHighlight_1.default(),
+                new DefaultHighlight_1.default(),
                 new Italic_1.default(),
@@ -380,2 +394,5 @@ new Placeholder_1.default(),
                 }),
+                new GoToPreviousInputTrigger_1.default({
+                    onGoToPreviousInput: this.handleGoToPreviousInput,
+                }),
                 new Placeholder_2.default({
@@ -387,3 +404,3 @@ placeholder: this.props.placeholder,
                 }),
-            ].filter(extension => {
+            ].filter((extension) => {
                 if (this.props.disableExtensions) {
@@ -451,3 +468,3 @@ return !this.props.disableExtensions.includes(extension.name);
     }
-    createParser() {
+    createMDParser() {
         return this.extensions.parser({
@@ -458,2 +475,5 @@ schema: this.schema,
     }
+    createDOMParser() {
+        return prosemirror_model_1.DOMParser.fromSchema(this.schema);
+    }
     createPasteParser() {
@@ -476,5 +496,4 @@ return this.extensions.parser({
                 prosemirror_gapcursor_1.gapCursor(),
-                prosemirror_inputrules_1.inputRules({
-                    rules: this.inputRules,
-                }),
+                prosemirror_inputrules_1.inputRules({ rules: this.inputRules }),
+                prosemirror_keymap_1.keymap({ Tab: () => true }),
                 prosemirror_keymap_1.keymap(prosemirror_commands_1.baseKeymap),
@@ -485,3 +504,8 @@ ],
     createDocument(content) {
-        return this.parser.parse(content);
+        if (domHelpers_1.isHTML(content)) {
+            const domNode = document.createElement("div");
+            domNode.innerHTML = content;
+            return this.domParser.parse(domNode);
+        }
+        return this.mdParser.parse(content);
     }
@@ -492,3 +516,3 @@ createView() {
         }
-        const isEditingCheckbox = tr => {
+        const isEditingCheckbox = (tr) => {
             return tr.steps.some((step) => {
@@ -502,3 +526,3 @@ var _a, _b, _c;
         const view = new prosemirror_view_1.EditorView(this.element, {
-            state: this.createState(this.props.value),
+            state: this.createState(this.props.defaultValue),
             editable: () => !this.props.readOnly,
@@ -510,3 +534,3 @@ nodeViews: this.nodeViews,
                 this.updateState(state);
-                if (transactions.some(tr => tr.docChanged) &&
+                if (transactions.some((tr) => tr.docChanged) &&
                     (!self.props.readOnly ||
@@ -537,3 +561,3 @@ (self.props.readOnlyWriteCheckboxes &&
     render() {
-        const { dir, readOnly, readOnlyWriteCheckboxes, style, tooltip, className, onKeyDown, } = this.props;
+        const { dir, readOnly, readOnlyWriteCheckboxes, style, tooltip, className, onKeyDown, fontScale } = this.props;
         const { isRTL } = this.state;
@@ -544,3 +568,3 @@ const dictionary = this.dictionary(this.props.dictionary);
                 React.createElement(React.Fragment, null,
-                    React.createElement(editor_1.StyledEditor, { dir: dir, rtl: isRTL, readOnly: readOnly, readOnlyWriteCheckboxes: readOnlyWriteCheckboxes, ref: ref => (this.element = ref) }),
+                    React.createElement(editor_1.StyledEditor, { ref: (ref) => (this.element = ref), fontScale: fontScale !== null && fontScale !== void 0 ? fontScale : 1, rtl: isRTL, readOnly: readOnly, readOnlyWriteCheckboxes: readOnlyWriteCheckboxes }),
                     !readOnly && this.view && (React.createElement(React.Fragment, null,
@@ -556,2 +580,3 @@ React.createElement(SelectionToolbar_1.default, { view: this.view, dictionary: dictionary, commands: this.commands, rtl: isRTL, isTemplate: this.props.template === true, onOpen: this.handleOpenSelectionMenu, onClose: this.handleCloseSelectionMenu, onSearchLink: this.props.onSearchLink, onClickLink: this.props.onClickLink, onCreateLink: this.props.onCreateLink, tooltip: tooltip }),
     dir: "auto",
+    fontScale: 1,
     placeholder: "Write something nice…",
@@ -562,3 +587,3 @@ onImageUploadStart: () => {
     },
-    onClickLink: href => {
+    onClickLink: (href) => {
         window.open(href, "_blank");
@@ -565,0 +590,0 @@ },

dist/lib/ComponentView.js

@@ -47,3 +47,3 @@ "use strict";
         const theme = this.editor.props.theme || (dark ? theme_1.dark : theme_1.light);
-        const children = this.component({
+        const children = (React.createElement(this.component, Object.assign({}, {
             theme,
@@ -54,3 +54,3 @@ node: this.node,
             getPos: this.getPos,
-        });
+        })));
         react_dom_1.default.render(React.createElement(styled_components_1.ThemeProvider, { theme: theme }, children), this.dom);
@@ -57,0 +57,0 @@ }

dist/lib/Extension.js

@@ -29,3 +29,3 @@ "use strict";
     commands(options) {
-        return attrs => () => false;
+        return (attrs) => () => false;
     }
@@ -32,0 +32,0 @@ get defaultOptions() {

dist/lib/ExtensionManager.js

@@ -13,3 +13,3 @@ "use strict";
         if (editor) {
-            extensions.forEach(extension => {
+            extensions.forEach((extension) => {
                 extension.bindEditor(editor);
@@ -22,3 +22,3 @@ });
         return this.extensions
-            .filter(extension => extension.type === "node")
+            .filter((extension) => extension.type === "node")
             .reduce((nodes, node) => (Object.assign(Object.assign({}, nodes), { [node.name]: node.schema })), {});
@@ -28,6 +28,6 @@ }
         const nodes = this.extensions
-            .filter(extension => extension.type === "node")
+            .filter((extension) => extension.type === "node")
             .reduce((nodes, extension) => (Object.assign(Object.assign({}, nodes), { [extension.name]: extension.toMarkdown })), {});
         const marks = this.extensions
-            .filter(extension => extension.type === "mark")
+            .filter((extension) => extension.type === "mark")
             .reduce((marks, extension) => (Object.assign(Object.assign({}, marks), { [extension.name]: extension.toMarkdown })), {});
@@ -38,3 +38,3 @@ return new serializer_1.MarkdownSerializer(nodes, marks);
         const tokens = this.extensions
-            .filter(extension => extension.type === "mark" || extension.type === "node")
+            .filter((extension) => extension.type === "mark" || extension.type === "node")
             .reduce((nodes, extension) => {
@@ -50,3 +50,3 @@ const md = extension.parseMarkdown();
         return this.extensions
-            .filter(extension => extension.type === "mark")
+            .filter((extension) => extension.type === "mark")
             .reduce((marks, { name, schema }) => (Object.assign(Object.assign({}, marks), { [name]: schema })), {});
@@ -56,3 +56,3 @@ }
         return this.extensions
-            .filter(extension => "plugins" in extension)
+            .filter((extension) => "plugins" in extension)
             .reduce((allPlugins, { plugins }) => [...allPlugins, ...plugins], []);
@@ -62,3 +62,3 @@ }
         return this.extensions
-            .filter(extension => "rulePlugins" in extension)
+            .filter((extension) => "rulePlugins" in extension)
             .reduce((allRulePlugins, { rulePlugins }) => [
@@ -71,9 +71,9 @@ ...allRulePlugins,
         const extensionKeymaps = this.extensions
-            .filter(extension => ["extension"].includes(extension.type))
-            .filter(extension => extension.keys)
-            .map(extension => extension.keys({ schema }));
+            .filter((extension) => ["extension"].includes(extension.type))
+            .filter((extension) => extension.keys)
+            .map((extension) => extension.keys({ schema }));
         const nodeMarkKeymaps = this.extensions
-            .filter(extension => ["node", "mark"].includes(extension.type))
-            .filter(extension => extension.keys)
-            .map(extension => extension.keys({
+            .filter((extension) => ["node", "mark"].includes(extension.type))
+            .filter((extension) => extension.keys)
+            .map((extension) => extension.keys({
             type: schema[`${extension.type}s`][extension.name],
@@ -89,9 +89,9 @@ schema,
         const extensionInputRules = this.extensions
-            .filter(extension => ["extension"].includes(extension.type))
-            .filter(extension => extension.inputRules)
-            .map(extension => extension.inputRules({ schema }));
+            .filter((extension) => ["extension"].includes(extension.type))
+            .filter((extension) => extension.inputRules)
+            .map((extension) => extension.inputRules({ schema }));
         const nodeMarkInputRules = this.extensions
-            .filter(extension => ["node", "mark"].includes(extension.type))
-            .filter(extension => extension.inputRules)
-            .map(extension => extension.inputRules({
+            .filter((extension) => ["node", "mark"].includes(extension.type))
+            .filter((extension) => extension.inputRules)
+            .map((extension) => extension.inputRules({
             type: schema[`${extension.type}s`][extension.name],
@@ -104,3 +104,3 @@ schema,
         return this.extensions
-            .filter(extension => extension.commands)
+            .filter((extension) => extension.commands)
             .reduce((allCommands, extension) => {
@@ -123,6 +123,6 @@ const { name, type } = extension;
                 if (Array.isArray(_value)) {
-                    commands[_name] = attrs => _value.forEach(callback => apply(callback, attrs));
+                    commands[_name] = (attrs) => _value.forEach((callback) => apply(callback, attrs));
                 }
                 else if (typeof _value === "function") {
-                    commands[_name] = attrs => apply(_value, attrs);
+                    commands[_name] = (attrs) => apply(_value, attrs);
                 }
@@ -129,0 +129,0 @@ };

dist/lib/markdown/rules.js

@@ -9,3 +9,3 @@ "use strict";
     const markdownIt = markdown_it_1.default("default", Object.assign({ breaks: false, html: false, linkify: false }, rules));
-    plugins.forEach(plugin => markdownIt.use(plugin));
+    plugins.forEach((plugin) => markdownIt.use(plugin));
     return markdownIt;
@@ -12,0 +12,0 @@ }

dist/marks/Bold.js

@@ -16,5 +16,8 @@ "use strict";
             parseDOM: [
-                { tag: "b" },
                 { tag: "strong" },
-                { style: "font-style", getAttrs: value => value === "bold" },
+                { style: "font-style", getAttrs: (value) => value === "bold" },
+                {
+                    style: "font-weight",
+                    getAttrs: (value) => ["700", "800", "900", "bold", "bolder"].includes(value),
+                },
             ],
@@ -21,0 +24,0 @@ toDOM: () => ["strong"],

dist/marks/Link.js

@@ -47,3 +47,3 @@ "use strict";
             ],
-            toDOM: node => [
+            toDOM: (node) => [
                 "a",
@@ -140,3 +140,3 @@ Object.assign(Object.assign({}, node.attrs), { rel: "noopener noreferrer nofollow" }),
             mark: "link",
-            getAttrs: tok => ({
+            getAttrs: (tok) => ({
                 href: tok.attrGet("href"),
@@ -143,0 +143,0 @@ title: tok.attrGet("title") || null,

dist/menus/block.d.ts

@@ -1,4 +0,6 @@
-import { MenuItem } from "../types";
+import { EmbedDescriptor, GroupMenuItem } from "../types";
 import baseDictionary from "../dictionary";
-export default function blockMenuItems(dictionary: typeof baseDictionary): MenuItem[];
+import { EditorView } from "prosemirror-view";
+export declare const getGroupedMenuItems: (view: EditorView, dictionary: typeof baseDictionary) => GroupMenuItem[];
+export declare const getEmbedsGroup: (embeds: EmbedDescriptor[]) => GroupMenuItem;
 //# sourceMappingURL=block.d.ts.map

dist/menus/block.js

 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.getEmbedsGroup = exports.getGroupedMenuItems = void 0;
 const outline_icons_1 = require("outline-icons");
+const icons_1 = require("../icons");
+const removeMarks_1 = __importDefault(require("../commands/removeMarks"));
 const SSR = typeof window === "undefined";
 const isMac = !SSR && window.navigator.platform === "MacIntel";
 const mod = isMac ? "⌘" : "ctrl";
-function blockMenuItems(dictionary) {
+const HIGHLIGHT_RADIUS = 12;
+const getGroupedMenuItems = (view, dictionary) => {
+    const { state } = view;
+    const { schema } = state;
+    const allMarks = [
+        schema.marks.highlight_default,
+        schema.marks.highlight_orange,
+        schema.marks.highlight_yellow,
+        schema.marks.highlight_green,
+        schema.marks.highlight_blue,
+    ];
     return [
         {
-            name: "heading",
-            title: dictionary.h2,
-            keywords: "h2 heading2",
-            icon: outline_icons_1.Heading2Icon,
-            shortcut: "^ ⇧ 2",
-            attrs: { level: 2 },
+            groupData: {
+                name: "Headers",
+            },
+            items: [
+                {
+                    name: "heading",
+                    title: dictionary.h2,
+                    keywords: "h2 heading2",
+                    searchKeyword: "h2",
+                    icon: outline_icons_1.Heading2Icon,
+                    shortcut: "^ ⇧ 2",
+                    attrs: { level: 2 },
+                },
+                {
+                    name: "heading",
+                    title: dictionary.h3,
+                    keywords: "h3 heading3",
+                    searchKeyword: "h3",
+                    icon: outline_icons_1.Heading3Icon,
+                    shortcut: "^ ⇧ 3",
+                    attrs: { level: 3 },
+                },
+            ],
         },
         {
-            name: "heading",
-            title: dictionary.h3,
-            keywords: "h3 heading3",
-            icon: outline_icons_1.Heading3Icon,
-            shortcut: "^ ⇧ 3",
-            attrs: { level: 3 },
+            groupData: {
+                name: "Lists",
+            },
+            items: [
+                {
+                    name: "checkbox_list",
+                    title: dictionary.checkboxList,
+                    icon: outline_icons_1.TodoListIcon,
+                    keywords: "checklist checkbox task",
+                    searchKeyword: "todo",
+                    shortcut: "^ ⇧ 7",
+                },
+                {
+                    name: "bullet_list",
+                    title: dictionary.bulletList,
+                    icon: outline_icons_1.BulletedListIcon,
+                    keywords: "bullet list",
+                    searchKeyword: "bullet",
+                    shortcut: "^ ⇧ 8",
+                },
+                {
+                    name: "ordered_list",
+                    title: dictionary.orderedList,
+                    icon: outline_icons_1.OrderedListIcon,
+                    keywords: "ordered numbered list",
+                    searchKeyword: "number",
+                    shortcut: "^ ⇧ 9",
+                },
+            ],
         },
         {
-            name: "separator",
+            groupData: {
+                name: "Insert",
+            },
+            items: [
+                {
+                    name: "image",
+                    title: dictionary.image,
+                    icon: outline_icons_1.ImageIcon,
+                    searchKeyword: "image",
+                    keywords: "picture photo",
+                },
+                {
+                    name: "table",
+                    title: dictionary.table,
+                    icon: outline_icons_1.TableIcon,
+                    searchKeyword: "table",
+                    attrs: { rowsCount: 3, colsCount: 3 },
+                },
+                {
+                    name: "blockquote",
+                    title: dictionary.quote,
+                    icon: outline_icons_1.BlockQuoteIcon,
+                    searchKeyword: "quote",
+                    shortcut: `${mod} ]`,
+                },
+                {
+                    name: "code_block",
+                    title: dictionary.codeBlock,
+                    icon: outline_icons_1.CodeIcon,
+                    shortcut: "^ ⇧ \\",
+                    keywords: "script code",
+                    searchKeyword: "code",
+                },
+                {
+                    name: "hr",
+                    title: dictionary.hr,
+                    icon: outline_icons_1.HorizontalRuleIcon,
+                    shortcut: `${mod} _`,
+                    keywords: "horizontal rule break line",
+                    searchKeyword: "divider",
+                },
+                {
+                    name: "hr",
+                    title: dictionary.pageBreak,
+                    icon: outline_icons_1.PageBreakIcon,
+                    keywords: "page print break line",
+                    searchKeyword: "page break",
+                    attrs: { markup: "***" },
+                },
+                {
+                    name: "link",
+                    title: dictionary.link,
+                    icon: outline_icons_1.LinkIcon,
+                    shortcut: `${mod} k`,
+                    keywords: "link url uri href",
+                    searchKeyword: "link",
+                },
+            ],
         },
         {
-            name: "checkbox_list",
-            title: dictionary.checkboxList,
-            icon: outline_icons_1.TodoListIcon,
-            keywords: "checklist checkbox task",
-            shortcut: "^ ⇧ 7",
+            groupData: {
+                name: "Highlight",
+            },
+            items: [
+                {
+                    name: "highlight_default",
+                    title: "Red",
+                    icon: icons_1.CircleIcon,
+                    iconSVGProps: {
+                        r: HIGHLIGHT_RADIUS,
+                        cx: HIGHLIGHT_RADIUS,
+                        cy: HIGHLIGHT_RADIUS,
+                        fill: schema.marks.highlight_default.attrs.color.default,
+                    },
+                    keywords: "highlight red",
+                    searchKeyword: "red",
+                    shortcut: "alt shift 1",
+                },
+                {
+                    name: "highlight_orange",
+                    title: "Orange",
+                    icon: icons_1.CircleIcon,
+                    iconSVGProps: {
+                        r: HIGHLIGHT_RADIUS,
+                        cx: HIGHLIGHT_RADIUS,
+                        cy: HIGHLIGHT_RADIUS,
+                        fill: schema.marks.highlight_orange.attrs.color.default,
+                    },
+                    keywords: "highlight orange",
+                    searchKeyword: "orange",
+                    shortcut: "alt shift 2",
+                },
+                {
+                    name: "highlight_yellow",
+                    title: "Yellow",
+                    icon: icons_1.CircleIcon,
+                    iconSVGProps: {
+                        r: HIGHLIGHT_RADIUS,
+                        cx: HIGHLIGHT_RADIUS,
+                        cy: HIGHLIGHT_RADIUS,
+                        fill: schema.marks.highlight_yellow.attrs.color.default,
+                    },
+                    keywords: "highlight yellow",
+                    searchKeyword: "yellow",
+                    shortcut: "alt shift 3",
+                },
+                {
+                    name: "highlight_green",
+                    title: "Green",
+                    icon: icons_1.CircleIcon,
+                    iconSVGProps: {
+                        r: HIGHLIGHT_RADIUS,
+                        cx: HIGHLIGHT_RADIUS,
+                        cy: HIGHLIGHT_RADIUS,
+                        fill: schema.marks.highlight_green.attrs.color.default,
+                    },
+                    keywords: "highlight green",
+                    searchKeyword: "green",
+                    shortcut: "alt shift 4",
+                },
+                {
+                    name: "highlight_blue",
+                    title: "Blue",
+                    icon: icons_1.CircleIcon,
+                    iconSVGProps: {
+                        r: HIGHLIGHT_RADIUS,
+                        cx: HIGHLIGHT_RADIUS,
+                        cy: HIGHLIGHT_RADIUS,
+                        fill: schema.marks.highlight_blue.attrs.color.default,
+                    },
+                    keywords: "highlight blue",
+                    searchKeyword: "blue",
+                    shortcut: "alt shift 5",
+                },
+                {
+                    name: "highlight_remove",
+                    title: "No highlight",
+                    icon: icons_1.CircleIcon,
+                    iconSVGProps: {
+                        r: HIGHLIGHT_RADIUS - 1,
+                        cx: HIGHLIGHT_RADIUS,
+                        cy: HIGHLIGHT_RADIUS,
+                        strokeWidth: 1,
+                        fill: "#fff",
+                        stroke: "#777",
+                    },
+                    keywords: "highlight remove unhighlight",
+                    searchKeyword: "unhighlight",
+                    shortcut: "",
+                    customOnClick: () => removeMarks_1.default(view, allMarks),
+                },
+            ],
         },
-        {
-            name: "bullet_list",
-            title: dictionary.bulletList,
-            icon: outline_icons_1.BulletedListIcon,
-            shortcut: "^ ⇧ 8",
-        },
-        {
-            name: "ordered_list",
-            title: dictionary.orderedList,
-            icon: outline_icons_1.OrderedListIcon,
-            shortcut: "^ ⇧ 9",
-        },
-        {
-            name: "separator",
-        },
-        {
-            name: "table",
-            title: dictionary.table,
-            icon: outline_icons_1.TableIcon,
-            attrs: { rowsCount: 3, colsCount: 3 },
-        },
-        {
-            name: "blockquote",
-            title: dictionary.quote,
-            icon: outline_icons_1.BlockQuoteIcon,
-            shortcut: `${mod} ]`,
-        },
-        {
-            name: "code_block",
-            title: dictionary.codeBlock,
-            icon: outline_icons_1.CodeIcon,
-            shortcut: "^ ⇧ \\",
-            keywords: "script",
-        },
-        {
-            name: "hr",
-            title: dictionary.hr,
-            icon: outline_icons_1.HorizontalRuleIcon,
-            shortcut: `${mod} _`,
-            keywords: "horizontal rule break line",
-        },
-        {
-            name: "hr",
-            title: dictionary.pageBreak,
-            icon: outline_icons_1.PageBreakIcon,
-            keywords: "page print break line",
-            attrs: { markup: "***" },
-        },
-        {
-            name: "image",
-            title: dictionary.image,
-            icon: outline_icons_1.ImageIcon,
-            keywords: "picture photo",
-        },
-        {
-            name: "link",
-            title: dictionary.link,
-            icon: outline_icons_1.LinkIcon,
-            shortcut: `${mod} k`,
-            keywords: "link url uri href",
-        },
-        {
-            name: "separator",
-        },
-        {
-            name: "container_notice",
-            title: dictionary.infoNotice,
-            icon: outline_icons_1.InfoIcon,
-            keywords: "container_notice card information",
-            attrs: { style: "info" },
-        },
-        {
-            name: "container_notice",
-            title: dictionary.warningNotice,
-            icon: outline_icons_1.WarningIcon,
-            keywords: "container_notice card error",
-            attrs: { style: "warning" },
-        },
-        {
-            name: "container_notice",
-            title: dictionary.tipNotice,
-            icon: outline_icons_1.StarredIcon,
-            keywords: "container_notice card suggestion",
-            attrs: { style: "tip" },
-        },
     ];
-}
-exports.default = blockMenuItems;
+};
+exports.getGroupedMenuItems = getGroupedMenuItems;
+const getEmbedsGroup = (embeds) => {
+    const embedItems = [];
+    for (const embed of embeds) {
+        if (embed.title && embed.icon) {
+            embedItems.push(Object.assign(Object.assign({}, embed), { name: "embed" }));
+        }
+    }
+    return {
+        groupData: { name: "Other" },
+        items: embedItems,
+    };
+};
+exports.getEmbedsGroup = getEmbedsGroup;
 //# sourceMappingURL=block.js.map

dist/menus/formatting.d.ts

@@ -1,5 +0,5 @@
-import { EditorState } from "prosemirror-state";
 import { MenuItem } from "../types";
 import baseDictionary from "../dictionary";
-export default function formattingMenuItems(state: EditorState, isTemplate: boolean, dictionary: typeof baseDictionary): MenuItem[];
+import { EditorView } from "prosemirror-view";
+export default function formattingMenuItems(view: EditorView, isTemplate: boolean, dictionary: typeof baseDictionary): MenuItem[];
 //# sourceMappingURL=formatting.d.ts.map

dist/menus/formatting.js

 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
@@ -9,5 +28,8 @@ return (mod && mod.__esModule) ? mod : { "default": mod };
 const isInList_1 = __importDefault(require("../queries/isInList"));
-const isMarkActive_1 = __importDefault(require("../queries/isMarkActive"));
+const isMarkActive_1 = __importStar(require("../queries/isMarkActive"));
 const isNodeActive_1 = __importDefault(require("../queries/isNodeActive"));
-function formattingMenuItems(state, isTemplate, dictionary) {
+const removeMarks_1 = __importDefault(require("../commands/removeMarks"));
+const icons_1 = require("../icons");
+function formattingMenuItems(view, isTemplate, dictionary) {
+    const { state } = view;
     const { schema } = state;
@@ -17,2 +39,9 @@ const isTable = prosemirror_tables_1.isInTable(state);
     const allowBlocks = !isTable && !isList;
+    const allMarks = [
+        schema.marks.highlight_default,
+        schema.marks.highlight_orange,
+        schema.marks.highlight_yellow,
+        schema.marks.highlight_green,
+        schema.marks.highlight_blue,
+    ];
     return [
@@ -43,9 +72,59 @@ {
         {
-            name: "highlight",
-            tooltip: dictionary.mark,
+            name: "separator",
+            visible: allowBlocks,
+        },
+        {
+            name: "highlight_default",
+            tooltip: "Red Highlight",
             icon: outline_icons_1.HighlightIcon,
-            active: isMarkActive_1.default(schema.marks.highlight),
+            iconColor: schema.marks.highlight_default.attrs.color.default,
+            active: isMarkActive_1.default(schema.marks.highlight_default),
             visible: !isTemplate,
         },
         {
+            name: "highlight_orange",
+            tooltip: "Orange Highlight",
+            icon: outline_icons_1.HighlightIcon,
+            iconColor: schema.marks.highlight_orange.attrs.color.default,
+            active: isMarkActive_1.default(schema.marks.highlight_orange),
+            visible: !isTemplate,
+        },
+        {
+            name: "highlight_yellow",
+            tooltip: "Yellow Highlight",
+            icon: outline_icons_1.HighlightIcon,
+            iconColor: schema.marks.highlight_yellow.attrs.color.default,
+            active: isMarkActive_1.default(schema.marks.highlight_yellow),
+            visible: !isTemplate,
+        },
+        {
+            name: "highlight_green",
+            tooltip: "Green Highlight",
+            icon: outline_icons_1.HighlightIcon,
+            iconColor: schema.marks.highlight_green.attrs.color.default,
+            active: isMarkActive_1.default(schema.marks.highlight_green),
+            visible: !isTemplate,
+        },
+        {
+            name: "highlight_blue",
+            tooltip: "Blue Highlight",
+            icon: outline_icons_1.HighlightIcon,
+            iconColor: schema.marks.highlight_blue.attrs.color.default,
+            active: isMarkActive_1.default(schema.marks.highlight_blue),
+            visible: !isTemplate,
+        },
+        {
+            name: "highlight_remove",
+            tooltip: "Remove All Highlights",
+            icon: icons_1.RemoveIcon,
+            iconColor: "#fff",
+            active: isMarkActive_1.isAnyMarkActive(allMarks),
+            visible: !isTemplate,
+            customOnClick: () => removeMarks_1.default(view, allMarks),
+        },
+        {
+            name: "separator",
+            visible: allowBlocks,
+        },
+        {
             name: "code_inline",
@@ -52,0 +131,0 @@ tooltip: dictionary.codeInline,

dist/menus/image.js

@@ -18,36 +18,2 @@ "use strict";
         {
-            name: "alignLeft",
-            tooltip: dictionary.alignLeft,
-            icon: outline_icons_1.AlignImageLeftIcon,
-            visible: true,
-            active: isLeftAligned,
-        },
-        {
-            name: "alignCenter",
-            tooltip: dictionary.alignCenter,
-            icon: outline_icons_1.AlignImageCenterIcon,
-            visible: true,
-            active: state => isNodeActive_1.default(schema.nodes.image)(state) &&
-                !isLeftAligned(state) &&
-                !isRightAligned(state),
-        },
-        {
-            name: "alignRight",
-            tooltip: dictionary.alignRight,
-            icon: outline_icons_1.AlignImageRightIcon,
-            visible: true,
-            active: isRightAligned,
-        },
-        {
-            name: "separator",
-            visible: true,
-        },
-        {
-            name: "downloadImage",
-            tooltip: dictionary.downloadImage,
-            icon: outline_icons_1.DownloadIcon,
-            visible: !!fetch,
-            active: () => false,
-        },
-        {
             name: "replaceImage",
@@ -54,0 +20,0 @@ tooltip: dictionary.replaceImage,

dist/nodes/BulletList.d.ts

@@ -0,1 +1,2 @@
+import { InputRule } from "prosemirror-inputrules";
 import Node from "./Node";
@@ -22,5 +23,6 @@ export default class BulletList extends Node {
     };
-    inputRules({ type }: {
+    inputRules({ type, schema }: {
         type: any;
-    }): import("prosemirror-inputrules").InputRule<any>[];
+        schema: any;
+    }): InputRule<any>[];
     toMarkdown(state: any, node: any): void;
@@ -27,0 +29,0 @@ parseMarkdown(): {

dist/nodes/BulletList.js

@@ -29,3 +29,3 @@ "use strict";
     }
-    inputRules({ type }) {
+    inputRules({ type, schema }) {
         return [prosemirror_inputrules_1.wrappingInputRule(/^\s*([-+*])\s$/, type)];
@@ -32,0 +32,0 @@ }

dist/nodes/CheckboxItem.d.ts

@@ -32,3 +32,3 @@ import Node from "./Node";
     }): {
-        Enter: (state: import("prosemirror-state").EditorState<any>, dispatch?: ((tr: import("prosemirror-state").Transaction<any>) => void) | undefined) => boolean;
+        Enter: (state: any, dispatch: any) => boolean;
         Tab: (state: import("prosemirror-state").EditorState<any>, dispatch?: ((tr: import("prosemirror-state").Transaction<any>) => void) | undefined) => boolean;
@@ -35,0 +35,0 @@ "Shift-Tab": (state: import("prosemirror-state").EditorState<any>, dispatch?: ((tr: import("prosemirror-state").Transaction<any>) => void) | undefined) => boolean;

dist/nodes/CheckboxItem.js

@@ -9,6 +9,7 @@ "use strict";
 const checkboxes_1 = __importDefault(require("../rules/checkboxes"));
+const customSplitListItem_1 = require("../commands/customSplitListItem");
 class CheckboxItem extends Node_1.default {
     constructor() {
         super(...arguments);
-        this.handleChange = event => {
+        this.handleChange = (event) => {
             const { view } = this.editor;
@@ -47,3 +48,3 @@ const { tr } = view.state;
             ],
-            toDOM: node => {
+            toDOM: (node) => {
                 const input = document.createElement("input");
@@ -79,3 +80,3 @@ input.type = "checkbox";
         return {
-            Enter: prosemirror_schema_list_1.splitListItem(type),
+            Enter: customSplitListItem_1.customSplitListItem(type),
             Tab: prosemirror_schema_list_1.sinkListItem(type),
@@ -94,3 +95,3 @@ "Shift-Tab": prosemirror_schema_list_1.liftListItem(type),
             block: "checkbox_item",
-            getAttrs: tok => ({
+            getAttrs: (tok) => ({
                 checked: tok.attrGet("checked") ? true : undefined,
@@ -97,0 +98,0 @@ }),

dist/nodes/CodeFence.js

@@ -79,3 +79,3 @@ "use strict";
         super(...arguments);
-        this.handleCopyToClipboard = event => {
+        this.handleCopyToClipboard = (event) => {
             const { view } = this.editor;
@@ -95,3 +95,3 @@ const element = event.target;
         };
-        this.handleLanguageChange = event => {
+        this.handleLanguageChange = (event) => {
             const { view } = this.editor;
@@ -146,3 +146,3 @@ const { tr } = view.state;
             ],
-            toDOM: node => {
+            toDOM: (node) => {
                 const button = document.createElement("button");
@@ -172,3 +172,3 @@ button.innerText = "Copy";
     commands({ type, schema }) {
-        return attrs => toggleBlockType_1.default(type, schema.nodes.paragraph, Object.assign({ language: (localStorage === null || localStorage === void 0 ? void 0 : localStorage.getItem(PERSISTENCE_KEY)) || DEFAULT_LANGUAGE }, attrs));
+        return (attrs) => toggleBlockType_1.default(type, schema.nodes.paragraph, Object.assign({ language: (localStorage === null || localStorage === void 0 ? void 0 : localStorage.getItem(PERSISTENCE_KEY)) || DEFAULT_LANGUAGE }, attrs));
     }
@@ -221,3 +221,3 @@ keys({ type, schema }) {
             block: "code_block",
-            getAttrs: tok => ({ language: tok.info }),
+            getAttrs: (tok) => ({ language: tok.info }),
         };
@@ -224,0 +224,0 @@ }

dist/nodes/Embed.js

@@ -61,3 +61,3 @@ "use strict";
             ],
-            toDOM: node => [
+            toDOM: (node) => [
                 "iframe",
@@ -73,3 +73,3 @@ { class: "embed", src: node.attrs.href, contentEditable: false },
     component({ isEditable, isSelected, theme, node }) {
-        const { embeds } = this.editor.props;
+        const embeds = this.editor.props.embeds;
         const hit = cache[node.attrs.href];
@@ -94,3 +94,3 @@ let Component = hit ? hit.Component : undefined;
     commands({ type }) {
-        return attrs => (state, dispatch) => {
+        return (attrs) => (state, dispatch) => {
             dispatch(state.tr.replaceSelectionWith(type.create(attrs)).scrollIntoView());
@@ -108,3 +108,3 @@ return true;
             node: "embed",
-            getAttrs: token => ({
+            getAttrs: (token) => ({
                 href: token.attrGet("href"),
@@ -111,0 +111,0 @@ }),

dist/nodes/Emoji.js

@@ -38,3 +38,3 @@ "use strict";
             ],
-            toDOM: node => {
+            toDOM: (node) => {
                 if (name_to_emoji_json_1.default[node.attrs["data-name"]]) {
@@ -60,3 +60,3 @@ const text = document.createTextNode(name_to_emoji_json_1.default[node.attrs["data-name"]]);
     commands({ type }) {
-        return attrs => (state, dispatch) => {
+        return (attrs) => (state, dispatch) => {
             const { selection } = state;
@@ -96,3 +96,3 @@ const position = selection.$cursor
             node: "emoji",
-            getAttrs: tok => {
+            getAttrs: (tok) => {
                 return { "data-name": tok.markup.trim() };
@@ -99,0 +99,0 @@ },

dist/nodes/Heading.d.ts

@@ -44,3 +44,2 @@ import { Node as ProsemirrorNode, NodeType } from "prosemirror-model";
     handleFoldContent: (event: any) => void;
-    handleCopyLink: (event: any) => void;
     keys({ type, schema }: {
@@ -47,0 +46,0 @@ type: any;

dist/nodes/Heading.js

@@ -26,3 +26,2 @@ "use strict";
 const prosemirror_state_1 = require("prosemirror-state");
-const copy_to_clipboard_1 = __importDefault(require("copy-to-clipboard"));
 const prosemirror_view_1 = require("prosemirror-view");
@@ -35,3 +34,3 @@ const prosemirror_inputrules_1 = require("prosemirror-inputrules");
 const Node_1 = __importDefault(require("./Node"));
-const types_1 = require("../types");
+const domHelpers_1 = require("../domHelpers");
 class Heading extends Node_1.default {
@@ -41,3 +40,3 @@ constructor() {
         this.className = "heading-name";
-        this.handleFoldContent = event => {
+        this.handleFoldContent = (event) => {
             event.preventDefault();
@@ -73,14 +72,2 @@ const { view } = this.editor;
         };
-        this.handleCopyLink = event => {
-            const anchor = event.currentTarget.parentNode.parentNode.previousSibling;
-            if (!anchor.className.includes(this.className)) {
-                throw new Error("Did not find anchor as previous sibling of heading");
-            }
-            const hash = `#${anchor.id}`;
-            const urlWithoutHash = window.location.href.split("#")[0];
-            copy_to_clipboard_1.default(urlWithoutHash + hash);
-            if (this.options.onShowToast) {
-                this.options.onShowToast(this.options.dictionary.linkCopied, types_1.ToastType.Info);
-            }
-        };
     }
@@ -110,13 +97,16 @@ get name() {
             draggable: false,
-            parseDOM: this.options.levels.map(level => ({
+            parseDOM: this.options.levels.map((level) => ({
                 tag: `h${level}`,
-                attrs: { level },
+                getAttrs: (hNode) => {
+                    const fontSize = domHelpers_1.getParsedValue(hNode.style.fontSize);
+                    if (isNaN(fontSize))
+                        return { level };
+                    if (domHelpers_1.isValidHeading(fontSize, level)) {
+                        return { level: domHelpers_1.getHeadingLevelByFontSize(fontSize) };
+                    }
+                    return false;
+                },
                 contentElement: ".heading-content",
             })),
-            toDOM: node => {
-                const anchor = document.createElement("button");
-                anchor.innerText = "#";
-                anchor.type = "button";
-                anchor.className = "heading-anchor";
-                anchor.addEventListener("click", event => this.handleCopyLink(event));
+            toDOM: (node) => {
                 const fold = document.createElement("button");
@@ -128,3 +118,3 @@ fold.innerText = "";
                 fold.className = `heading-fold ${node.attrs.collapsed ? "collapsed" : ""}`;
-                fold.addEventListener("mousedown", event => this.handleFoldContent(event));
+                fold.addEventListener("click", (event) => this.handleFoldContent(event));
                 return [
@@ -138,3 +128,2 @@ `h${node.attrs.level + (this.options.offset || 0)}`,
                         },
-                        anchor,
                         fold,
@@ -178,3 +167,3 @@ ],
     get plugins() {
-        const getAnchors = doc => {
+        const getAnchors = (doc) => {
             const decorations = [];
@@ -214,3 +203,3 @@ const previouslySeen = {};
             props: {
-                decorations: state => plugin.getState(state),
+                decorations: (state) => plugin.getState(state),
             },
@@ -221,3 +210,3 @@ });
     inputRules({ type }) {
-        return this.options.levels.map(level => prosemirror_inputrules_1.textblockTypeInputRule(new RegExp(`^(#{1,${level}})\\s$`), type, () => ({
+        return this.options.levels.map((level) => prosemirror_inputrules_1.textblockTypeInputRule(new RegExp(`^(#{1,${level}})\\s$`), type, () => ({
             level,
@@ -224,0 +213,0 @@ })));

dist/nodes/Image.d.ts

@@ -14,8 +14,11 @@ /// <reference types="react" />
             };
-            layoutClass: {
+            title: {
                 default: null;
             };
-            title: {
+            width: {
                 default: null;
             };
+            height: {
+                default: null;
+            };
         };
@@ -29,3 +32,3 @@ content: string;
             tag: string;
-            getAttrs: (dom: HTMLImageElement) => {
+            getAttrs: (dom: HTMLDivElement) => {
                 src: string | null;
@@ -40,7 +43,7 @@ alt: string | null;
     };
-    handleKeyDown: ({ node, getPos }: {
+    handleCaptionKeyDown: ({ node, getPos }: {
         node: any;
         getPos: any;
     }) => (event: any) => void;
-    handleBlur: ({ node, getPos }: {
+    handleCaptionBlur: ({ node, getPos }: {
         node: any;
@@ -52,5 +55,8 @@ getPos: any;
     }) => (event: any) => void;
-    handleDownload: ({ node }: {
+    resizeImage: ({ node, getPos, width, height }: {
         node: any;
-    }) => (event: any) => void;
+        getPos: any;
+        width: any;
+        height: any;
+    }) => void;
     component: (props: any) => JSX.Element;
@@ -61,16 +67,7 @@ toMarkdown(state: any, node: any): void;
         getAttrs: (token: any) => {
-            layoutClass?: undefined;
-            title?: undefined;
             src: any;
             alt: any;
-        } | {
-            layoutClass: any;
-            title?: undefined;
-            src: any;
-            alt: any;
-        } | {
             title: any;
-            layoutClass?: undefined;
-            src: any;
-            alt: any;
+            width: any;
+            height: any;
         };
@@ -81,9 +78,5 @@ };
     }): {
-        downloadImage: () => (state: any) => Promise<boolean>;
         deleteImage: () => (state: any, dispatch: any) => boolean;
-        alignRight: () => (state: any, dispatch: any) => boolean;
-        alignLeft: () => (state: any, dispatch: any) => boolean;
         replaceImage: () => (state: any) => void;
-        alignCenter: () => (state: any, dispatch: any) => boolean;
-        createImage: (attrs: any) => (state: any, dispatch: any) => boolean;
+        createImage: () => () => void;
     };
@@ -93,4 +86,5 @@ inputRules({ type }: {
     }): InputRule<any>[];
+    get rulePlugins(): any[];
     get plugins(): Plugin<any, any>[];
 }
 //# sourceMappingURL=Image.d.ts.map

dist/nodes/Image.js

@@ -26,7 +26,5 @@ "use strict";
 const React = __importStar(require("react"));
-const outline_icons_1 = require("outline-icons");
 const prosemirror_state_1 = require("prosemirror-state");
 const prosemirror_inputrules_1 = require("prosemirror-inputrules");
 const styled_components_1 = __importDefault(require("styled-components"));
-const react_medium_image_zoom_1 = __importDefault(require("react-medium-image-zoom"));
 const getDataTransferFiles_1 = __importDefault(require("../lib/getDataTransferFiles"));
@@ -36,81 +34,57 @@ const uploadPlaceholder_1 = __importDefault(require("../lib/uploadPlaceholder"));
 const Node_1 = __importDefault(require("./Node"));
+const useResizeObserver_1 = __importDefault(require("../hooks/useResizeObserver"));
+const imsize_1 = __importDefault(require("../rules/imsize"));
 const IMAGE_INPUT_REGEX = /!\[(?<alt>[^\]\[]*?)]\((?<filename>[^\]\[]*?)(?=\“|\))\“?(?<layoutclass>[^\]\[\”]+)?\”?\)$/;
-const uploadPlugin = options => new prosemirror_state_1.Plugin({
-    props: {
-        handleDOMEvents: {
-            paste(view, event) {
-                if ((view.props.editable && !view.props.editable(view.state)) ||
-                    !options.uploadImage) {
+const uploadPlugin = (options) => {
+    return new prosemirror_state_1.Plugin({
+        props: {
+            handleDOMEvents: {
+                paste(view, event) {
+                    if ((view.props.editable && !view.props.editable(view.state)) ||
+                        !options.uploadImage) {
+                        return false;
+                    }
+                    if (!event.clipboardData)
+                        return false;
+                    const files = Array.prototype.slice
+                        .call(event.clipboardData.items)
+                        .map((dt) => dt.getAsFile())
+                        .filter((file) => file);
+                    if (files.length === 0)
+                        return false;
+                    const { tr } = view.state;
+                    if (!tr.selection.empty) {
+                        tr.deleteSelection();
+                    }
+                    const pos = tr.selection.from;
+                    insertFiles_1.default(view, event, pos, files, options);
+                    return true;
+                },
+                drop(view, event) {
+                    if ((view.props.editable && !view.props.editable(view.state)) ||
+                        !options.uploadImage) {
+                        return false;
+                    }
+                    const files = getDataTransferFiles_1.default(event).filter((file) => /image/i.test(file.type));
+                    if (files.length === 0) {
+                        return false;
+                    }
+                    const result = view.posAtCoords({
+                        left: event.clientX,
+                        top: event.clientY,
+                    });
+                    if (result) {
+                        insertFiles_1.default(view, event, result.pos, files, options);
+                        return true;
+                    }
                     return false;
-                }
-                if (!event.clipboardData)
-                    return false;
-                const files = Array.prototype.slice
-                    .call(event.clipboardData.items)
-                    .map(dt => dt.getAsFile())
-                    .filter(file => file);
-                if (files.length === 0)
-                    return false;
-                const { tr } = view.state;
-                if (!tr.selection.empty) {
-                    tr.deleteSelection();
-                }
-                const pos = tr.selection.from;
-                insertFiles_1.default(view, event, pos, files, options);
-                return true;
+                },
             },
-            drop(view, event) {
-                if ((view.props.editable && !view.props.editable(view.state)) ||
-                    !options.uploadImage) {
-                    return false;
-                }
-                const files = getDataTransferFiles_1.default(event).filter(file => /image/i.test(file.type));
-                if (files.length === 0) {
-                    return false;
-                }
-                const result = view.posAtCoords({
-                    left: event.clientX,
-                    top: event.clientY,
-                });
-                if (result) {
-                    insertFiles_1.default(view, event, result.pos, files, options);
-                    return true;
-                }
-                return false;
-            },
         },
-    },
-});
-const IMAGE_CLASSES = ["right-50", "left-50"];
-const getLayoutAndTitle = tokenTitle => {
-    if (!tokenTitle)
-        return {};
-    if (IMAGE_CLASSES.includes(tokenTitle)) {
-        return {
-            layoutClass: tokenTitle,
-        };
-    }
-    else {
-        return {
-            title: tokenTitle,
-        };
-    }
+    });
 };
-const downloadImageNode = async (node) => {
-    const image = await fetch(node.attrs.src);
-    const imageBlob = await image.blob();
-    const imageURL = URL.createObjectURL(imageBlob);
-    const extension = imageBlob.type.split("/")[1];
-    const potentialName = node.attrs.alt || "image";
-    const link = document.createElement("a");
-    link.href = imageURL;
-    link.download = `${potentialName}.${extension}`;
-    document.body.appendChild(link);
-    link.click();
-    document.body.removeChild(link);
-};
 class Image extends Node_1.default {
     constructor() {
         super(...arguments);
-        this.handleKeyDown = ({ node, getPos }) => event => {
+        this.handleCaptionKeyDown = ({ node, getPos }) => (event) => {
             if (event.key === "Enter") {
@@ -133,5 +107,5 @@ event.preventDefault();
         };
-        this.handleBlur = ({ node, getPos }) => event => {
+        this.handleCaptionBlur = ({ node, getPos }) => (event) => {
             const alt = event.target.innerText;
-            const { src, title, layoutClass } = node.attrs;
+            const { src, title, width, height } = node.attrs;
             if (alt === node.attrs.alt)
@@ -146,7 +120,8 @@ return;
                 title,
-                layoutClass,
+                width,
+                height,
             });
             view.dispatch(transaction);
         };
-        this.handleSelect = ({ getPos }) => event => {
+        this.handleSelect = ({ getPos }) => (event) => {
             event.preventDefault();
@@ -158,25 +133,32 @@ const { view } = this.editor;
         };
-        this.handleDownload = ({ node }) => event => {
-            event.preventDefault();
-            event.stopPropagation();
-            downloadImageNode(node);
+        this.resizeImage = ({ node, getPos, width, height }) => {
+            const { view } = this.editor;
+            const { tr } = view.state;
+            const pos = getPos();
+            const transaction = tr.setNodeMarkup(pos, undefined, Object.assign(Object.assign({}, node.attrs), { width: Math.round(width), height: Math.round(height) }));
+            view.dispatch(transaction);
         };
-        this.component = props => {
-            const { theme, isSelected } = props;
-            const { alt, src, title, layoutClass } = props.node.attrs;
-            const className = layoutClass ? `image image-${layoutClass}` : "image";
+        this.component = (props) => {
+            const { isSelected } = props;
+            const { alt, src, title, width, height } = props.node.attrs;
+            const className = "image";
+            const resizableWrapperRef = React.useRef(null);
+            const sizeRef = React.useRef({ width, height });
+            const imageResized = React.useRef(false);
+            React.useEffect(() => {
+                if (imageResized.current) {
+                    imageResized.current = false;
+                    this.resizeImage(Object.assign(Object.assign({}, props), sizeRef.current));
+                }
+            }, [isSelected]);
+            useResizeObserver_1.default(resizableWrapperRef, (entry) => {
+                imageResized.current = true;
+                sizeRef.current.width = entry.width;
+                sizeRef.current.height = entry.height;
+            });
             return (React.createElement("div", { contentEditable: false, className: className },
                 React.createElement(ImageWrapper, { className: isSelected ? "ProseMirror-selectednode" : "", onClick: this.handleSelect(props) },
-                    React.createElement(Button, null,
-                        React.createElement(outline_icons_1.DownloadIcon, { color: "currentColor", onClick: this.handleDownload(props) })),
-                    React.createElement(react_medium_image_zoom_1.default, { image: {
-                            src,
-                            alt,
-                            title,
-                        }, defaultStyles: {
-                            overlay: {
-                                backgroundColor: theme.background,
-                            },
-                        }, shouldRespectMaxDimension: true })),
-                React.createElement(Caption, { onKeyDown: this.handleKeyDown(props), onBlur: this.handleBlur(props), className: "caption", tabIndex: -1, role: "textbox", contentEditable: true, suppressContentEditableWarning: true, "data-caption": this.options.dictionary.imageCaptionPlaceholder }, alt)));
+                    React.createElement(ResizableWrapper, Object.assign({ ref: resizableWrapperRef }, { width, height }),
+                        React.createElement("img", { src: src, alt: alt, title: title }))),
+                React.createElement(Caption, { onKeyDown: this.handleCaptionKeyDown(props), onBlur: this.handleCaptionBlur(props), className: "caption", tabIndex: -1, role: "textbox", contentEditable: true, suppressContentEditableWarning: true, "data-caption": this.options.dictionary.imageCaptionPlaceholder }, alt)));
         };
@@ -192,11 +174,6 @@ }
                 src: {},
-                alt: {
-                    default: null,
-                },
-                layoutClass: {
-                    default: null,
-                },
-                title: {
-                    default: null,
-                },
+                alt: { default: null },
+                title: { default: null },
+                width: { default: null },
+                height: { default: null },
             },
@@ -213,7 +190,2 @@ content: "text*",
                         const img = dom.getElementsByTagName("img")[0];
-                        const className = dom.className;
-                        const layoutClassMatched = className && className.match(/image-(.*)$/);
-                        const layoutClass = layoutClassMatched
-                            ? layoutClassMatched[1]
-                            : null;
                         return {
@@ -223,3 +195,2 @@ src: img === null || img === void 0 ? void 0 : img.getAttribute("src"),
                             title: img === null || img === void 0 ? void 0 : img.getAttribute("title"),
-                            layoutClass: layoutClass,
                         };
@@ -239,11 +210,6 @@ },
             ],
-            toDOM: node => {
-                const className = node.attrs.layoutClass
-                    ? `image image-${node.attrs.layoutClass}`
-                    : "image";
+            toDOM: (node) => {
                 return [
                     "div",
-                    {
-                        class: className,
-                    },
+                    { class: "image" },
                     ["img", Object.assign(Object.assign({}, node.attrs), { contentEditable: false })],
@@ -260,8 +226,8 @@ ["p", { class: "caption" }, 0],
             state.esc(node.attrs.src);
-        if (node.attrs.layoutClass) {
-            markdown += ' "' + state.esc(node.attrs.layoutClass) + '"';
-        }
-        else if (node.attrs.title) {
+        if (node.attrs.title) {
             markdown += ' "' + state.esc(node.attrs.title) + '"';
         }
+        if (node.attrs.width && node.attrs.height) {
+            markdown += " =" + node.attrs.width + "x" + node.attrs.height;
+        }
         markdown += ")";
@@ -273,4 +239,10 @@ state.write(markdown);
             node: "image",
-            getAttrs: token => {
-                return Object.assign({ src: token.attrGet("src"), alt: (token.children[0] && token.children[0].content) || null }, getLayoutAndTitle(token.attrGet("title")));
+            getAttrs: (token) => {
+                return {
+                    src: token.attrGet("src"),
+                    alt: (token.children[0] && token.children[0].content) || null,
+                    title: token.attrGet("title"),
+                    width: token.attrGet("width") || null,
+                    height: token.attrGet("height") || null,
+                };
             },
@@ -281,10 +253,2 @@ };
         return {
-            downloadImage: () => async (state) => {
-                const { node } = state.selection;
-                if (node.type.name !== "image") {
-                    return false;
-                }
-                downloadImageNode(node);
-                return true;
-            },
             deleteImage: () => (state, dispatch) => {
@@ -294,15 +258,3 @@ dispatch(state.tr.deleteSelection());
             },
-            alignRight: () => (state, dispatch) => {
-                const attrs = Object.assign(Object.assign({}, state.selection.node.attrs), { title: null, layoutClass: "right-50" });
-                const { selection } = state;
-                dispatch(state.tr.setNodeMarkup(selection.from, undefined, attrs));
-                return true;
-            },
-            alignLeft: () => (state, dispatch) => {
-                const attrs = Object.assign(Object.assign({}, state.selection.node.attrs), { title: null, layoutClass: "left-50" });
-                const { selection } = state;
-                dispatch(state.tr.setNodeMarkup(selection.from, undefined, attrs));
-                return true;
-            },
-            replaceImage: () => state => {
+            replaceImage: () => (state) => {
                 const { view } = this.editor;
@@ -329,18 +281,4 @@ const { uploadImage, onImageUploadStart, onImageUploadStop, onShowToast, } = this.editor.props;
             },
-            alignCenter: () => (state, dispatch) => {
-                const attrs = Object.assign(Object.assign({}, state.selection.node.attrs), { layoutClass: null });
-                const { selection } = state;
-                dispatch(state.tr.setNodeMarkup(selection.from, undefined, attrs));
-                return true;
+            createImage: () => () => {
             },
-            createImage: attrs => (state, dispatch) => {
-                const { selection } = state;
-                const position = selection.$cursor
-                    ? selection.$cursor.pos
-                    : selection.$to.pos;
-                const node = type.create(attrs);
-                const transaction = state.tr.insert(position, node);
-                dispatch(transaction);
-                return true;
-            },
         };
@@ -351,7 +289,9 @@ }
             new prosemirror_inputrules_1.InputRule(IMAGE_INPUT_REGEX, (state, match, start, end) => {
-                const [okay, alt, src, matchedTitle] = match;
+                const [okay, alt, src] = match;
                 const { tr } = state;
                 if (okay) {
-                    tr.replaceWith(start - 1, end, type.create(Object.assign({ src,
-                        alt }, getLayoutAndTitle(matchedTitle))));
+                    tr.replaceWith(start - 1, end, type.create({
+                        src,
+                        alt,
+                    }));
                 }
@@ -362,2 +302,5 @@ return tr;
     }
+    get rulePlugins() {
+        return [imsize_1.default];
+    }
     get plugins() {
@@ -368,2 +311,14 @@ return [uploadPlaceholder_1.default, uploadPlugin(this.options)];
 exports.default = Image;
+const ResizableWrapper = styled_components_1.default.div `
+  resize: both;
+  overflow: hidden;
+  max-height: 75%;
+
+  ${({ width, height }) => width &&
+    height &&
+    `
+    width: ${width}px;
+    height: ${height}px;
+  `}
+`;
 const Button = styled_components_1.default.button `
@@ -377,4 +332,4 @@ position: absolute;
   border-radius: 4px;
-  background: ${props => props.theme.background};
-  color: ${props => props.theme.textSecondary};
+  background: ${(props) => props.theme.background};
+  color: ${(props) => props.theme.textSecondary};
   width: 24px;
@@ -392,3 +347,3 @@ height: 24px;
   &:hover {
-    color: ${props => props.theme.text};
+    color: ${(props) => props.theme.text};
     opacity: 1;
@@ -403,3 +358,3 @@ }
   font-weight: normal;
-  color: ${props => props.theme.textSecondary};
+  color: ${(props) => props.theme.textSecondary};
   padding: 2px 0;
@@ -420,3 +375,3 @@ line-height: 16px;
   &:empty:before {
-    color: ${props => props.theme.placeholder};
+    color: ${(props) => props.theme.placeholder};
     content: attr(data-caption);
@@ -423,0 +378,0 @@ pointer-events: none;

dist/nodes/ListItem.d.ts

@@ -19,3 +19,3 @@ import { Transaction, EditorState, Plugin } from "prosemirror-state";
     }): {
-        Enter: (state: EditorState<any>, dispatch?: ((tr: Transaction<any>) => void) | undefined) => boolean;
+        Enter: (state: any, dispatch: any) => boolean;
         Tab: (state: EditorState<any>, dispatch?: ((tr: Transaction<any>) => void) | undefined) => boolean;
@@ -22,0 +22,0 @@ "Shift-Tab": (state: EditorState<any>, dispatch?: ((tr: Transaction<any>) => void) | undefined) => boolean;

dist/nodes/ListItem.js

@@ -14,2 +14,3 @@ "use strict";
 const getParentListItem_1 = __importDefault(require("../queries/getParentListItem"));
+const customSplitListItem_1 = require("../commands/customSplitListItem");
 class ListItem extends Node_1.default {
@@ -43,3 +44,3 @@ get name() {
                             case "mouseover": {
-                                const result = prosemirror_utils_1.findParentNodeClosestToPos(newState.doc.resolve(action.pos), node => node.type.name === this.name ||
+                                const result = prosemirror_utils_1.findParentNodeClosestToPos(newState.doc.resolve(action.pos), (node) => node.type.name === this.name ||
                                     node.type.name === "checkbox_item");
@@ -49,3 +50,3 @@ if (!result) {
                                 }
-                                const list = prosemirror_utils_1.findParentNodeClosestToPos(newState.doc.resolve(action.pos), node => isList_1.default(node, this.editor.schema));
+                                const list = prosemirror_utils_1.findParentNodeClosestToPos(newState.doc.resolve(action.pos), (node) => isList_1.default(node, this.editor.schema));
                                 if (!list) {
@@ -74,3 +75,3 @@ return set;
                             case "mouseout": {
-                                const result = prosemirror_utils_1.findParentNodeClosestToPos(newState.doc.resolve(action.pos), node => node.type.name === this.name ||
+                                const result = prosemirror_utils_1.findParentNodeClosestToPos(newState.doc.resolve(action.pos), (node) => node.type.name === this.name ||
                                     node.type.name === "checkbox_item");
@@ -80,3 +81,3 @@ if (!result) {
                                 }
-                                return set.remove(set.find(result.pos, result.pos + result.node.nodeSize, spec => spec.hover));
+                                return set.remove(set.find(result.pos, result.pos + result.node.nodeSize, (spec) => spec.hover));
                             }
@@ -140,3 +141,3 @@ default:
         return {
-            Enter: prosemirror_schema_list_1.splitListItem(type),
+            Enter: customSplitListItem_1.customSplitListItem(type),
             Tab: prosemirror_schema_list_1.sinkListItem(type),
@@ -143,0 +144,0 @@ "Shift-Tab": prosemirror_schema_list_1.liftListItem(type),

dist/plugins/BlockMenuTrigger.js

@@ -36,4 +36,4 @@ "use strict";
 const MAX_MATCH = 500;
-const OPEN_REGEX = /^\/(\w+)?$/;
-const CLOSE_REGEX = /(^(?!\/(\w+)?)(.*)$|^\/(([\w\W]+)\s.*|\s)$|^\/((\W)+)$)/;
+const OPEN_REGEX = /^\/(\w+)?$|.*\s\/(\w+)?$/;
+const CLOSE_REGEX = /\/(.*\s)$/;
 function run(view, from, to, regex, handler) {
@@ -68,5 +68,15 @@ if (view.composing) {
                 props: {
-                    handleClick: () => {
-                        this.options.onClose();
-                        return false;
+                    handleDOMEvents: {
+                        contextmenu: (view, event) => {
+                            if (!view.hasFocus()) {
+                                return false;
+                            }
+                            const parent = prosemirror_utils_1.findParentNode((node) => node.type.name === "paragraph")(view.state.selection);
+                            if (!parent || parent.node.content.size > 0) {
+                                return false;
+                            }
+                            event.preventDefault();
+                            this.options.onOpen();
+                            return true;
+                        },
                     },
@@ -79,3 +89,3 @@ handleKeyDown: (view, event) => {
                                     if (match) {
-                                        this.options.onOpen(match[1]);
+                                        this.options.onOpen(match[1] || "");
                                     }
@@ -100,4 +110,4 @@ else {
                     },
-                    decorations: state => {
-                        const parent = prosemirror_utils_1.findParentNode(node => node.type.name === "paragraph")(state.selection);
+                    decorations: (state) => {
+                        const parent = prosemirror_utils_1.findParentNode((node) => node.type.name === "paragraph")(state.selection);
                         if (!parent) {
@@ -143,3 +153,3 @@ return;
                     !prosemirror_tables_1.isInTable(state)) {
-                    this.options.onOpen(match[1]);
+                    this.options.onOpen(match[1] || match[2] || "");
                 }
@@ -146,0 +156,0 @@ return null;

dist/plugins/EmojiTrigger.js

@@ -11,4 +11,4 @@ "use strict";
 const BlockMenuTrigger_1 = require("./BlockMenuTrigger");
-const OPEN_REGEX = /(?:^|\s):([0-9a-zA-Z_+-]+)?$/;
-const CLOSE_REGEX = /(?:^|\s):(([0-9a-zA-Z_+-]*\s+)|(\s+[0-9a-zA-Z_+-]+)|[^0-9a-zA-Z_+-]+)$/;
+const OPEN_REGEX = /::([0-9a-zA-Z_+-]+)?$/;
+const CLOSE_REGEX = /::(([0-9a-zA-Z_+-]*\s+)|(\s+[0-9a-zA-Z_+-]+)|[^0-9a-zA-Z_+-]+)$/;
 class EmojiTrigger extends Extension_1.default {
@@ -15,0 +15,0 @@ get name() {

dist/plugins/Keys.js

@@ -23,18 +23,19 @@ "use strict";
                     handleKeyDown: (view, event) => {
-                        if (view.state.selection instanceof prosemirror_state_1.AllSelection) {
+                        const { state, dispatch } = view;
+                        if (state.selection instanceof prosemirror_state_1.AllSelection) {
                             if (event.key === "ArrowUp") {
-                                const selection = prosemirror_state_1.Selection.atStart(view.state.doc);
-                                view.dispatch(view.state.tr.setSelection(selection));
+                                const selection = prosemirror_state_1.Selection.atStart(state.doc);
+                                dispatch(state.tr.setSelection(selection));
                                 return true;
                             }
                             if (event.key === "ArrowDown") {
-                                const selection = prosemirror_state_1.Selection.atEnd(view.state.doc);
-                                view.dispatch(view.state.tr.setSelection(selection));
+                                const selection = prosemirror_state_1.Selection.atEnd(state.doc);
+                                dispatch(state.tr.setSelection(selection));
                                 return true;
                             }
                         }
-                        if (view.state.selection instanceof prosemirror_gapcursor_1.GapCursor) {
+                        if (state.selection instanceof prosemirror_gapcursor_1.GapCursor) {
                             if (event.key === "Enter") {
-                                view.dispatch(view.state.tr.insert(view.state.selection.from, view.state.schema.nodes.paragraph.create({})));
-                                view.dispatch(view.state.tr.setSelection(prosemirror_state_1.TextSelection.near(view.state.doc.resolve(view.state.selection.from), -1)));
+                                dispatch(state.tr.insert(state.selection.from, state.schema.nodes.paragraph.create({})));
+                                dispatch(state.tr.setSelection(prosemirror_state_1.TextSelection.near(state.doc.resolve(state.selection.from), -1)));
                                 return true;
@@ -41,0 +42,0 @@ }

dist/queries/isMarkActive.d.ts

 import { EditorState } from "prosemirror-state";
 declare const isMarkActive: (type: any) => (state: EditorState) => boolean;
+export declare const isAnyMarkActive: (types: any[]) => (state: EditorState) => boolean;
 export default isMarkActive;
 //# sourceMappingURL=isMarkActive.d.ts.map

dist/queries/isMarkActive.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const isMarkActive = type => (state) => {
+exports.isAnyMarkActive = void 0;
+const isMarkActive = (type) => (state) => {
     if (!type) {
@@ -12,3 +13,10 @@ return false;
 };
+const isAnyMarkActive = (types) => (state) => {
+    if (!Array.isArray(types)) {
+        return false;
+    }
+    return types.some((type) => isMarkActive(type)(state));
+};
+exports.isAnyMarkActive = isAnyMarkActive;
 exports.default = isMarkActive;
 //# sourceMappingURL=isMarkActive.js.map

dist/server.js

@@ -34,3 +34,2 @@ "use strict";
 const Code_1 = __importDefault(require("./marks/Code"));
-const Highlight_1 = __importDefault(require("./marks/Highlight"));
 const Italic_1 = __importDefault(require("./marks/Italic"));
@@ -65,3 +64,2 @@ const Link_1 = __importDefault(require("./marks/Link"));
     new Code_1.default(),
-    new Highlight_1.default(),
     new Italic_1.default(),
@@ -68,0 +66,0 @@ new Link_1.default(),

dist/styles/editor.d.ts

 export declare const StyledEditor: import("styled-components").StyledComponent<"div", any, {
     rtl: boolean;
+    fontScale: number;
     readOnly?: boolean | undefined;
@@ -4,0 +5,0 @@ readOnlyWriteCheckboxes?: boolean | undefined;

dist/styles/editor.js

@@ -9,7 +9,7 @@ "use strict";
 exports.StyledEditor = styled_components_1.default("div") `
-  color: ${props => props.theme.text};
-  background: ${props => props.theme.background};
-  font-family: ${props => props.theme.fontFamily};
-  font-weight: ${props => props.theme.fontWeight};
-  font-size: 1em;
+  color: ${(props) => props.theme.text};
+  background: ${(props) => props.theme.background};
+  font-family: ${(props) => props.theme.fontFamily};
+  font-weight: ${(props) => props.theme.fontWeight};
+  font-size: ${({ fontScale }) => fontScale * 16}px;
   line-height: 1.7em;
@@ -29,2 +29,7 @@ width: 100%;
 
+  .ProseMirror > ul, .ProseMirror > ol {
+    padding: ${(props) => (props.rtl ? "0 18px 0 0" : "0 0 0 18px")};
+  }
+
+
   pre {
@@ -38,2 +43,6 @@ white-space: pre-wrap;
 
+  ul > li::marker {
+    font-size: ${({ fontScale }) => fontScale * 21}px;
+  }
+
   .image {
@@ -45,6 +54,7 @@ text-align: center;
     img {
-      pointer-events: ${props => (props.readOnly ? "initial" : "none")};
+      pointer-events: ${(props) => (props.readOnly ? "initial" : "none")};
       display: inline-block;
-      max-width: 100%;
-      max-height: 75vh;
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
     }
@@ -59,3 +69,3 @@
     position: relative;
-    background: ${props => props.theme.background};
+    background: ${(props) => props.theme.background};
     margin-bottom: calc(28px + 1.2em);
@@ -74,18 +84,2 @@
 
-  .image-right-50 {
-    float: right;
-    width: 50%;
-    margin-left: 2em;
-    margin-bottom: 1em;
-    clear: initial;
-  }
-
-  .image-left-50 {
-    float: left;
-    width: 50%;
-    margin-right: 2em;
-    margin-bottom: 1em;
-    clear: initial;
-  }
-
   .ProseMirror-hideselection *::selection {
@@ -103,3 +97,3 @@ background: transparent;
     outline: 2px solid
-      ${props => (props.readOnly ? "transparent" : props.theme.selected)};
+      ${(props) => (props.readOnly ? "transparent" : props.theme.selected)};
   }
@@ -116,7 +110,7 @@
     position: absolute;
-    left: ${props => (props.rtl ? "-2px" : "-32px")};
-    right: ${props => (props.rtl ? "-32px" : "-2px")};
+    left: ${(props) => (props.rtl ? "-2px" : "-32px")};
+    right: ${(props) => (props.rtl ? "-32px" : "-2px")};
     top: -2px;
     bottom: -2px;
-    border: 2px solid ${props => props.theme.selected};
+    border: 2px solid ${(props) => props.theme.selected};
     pointer-events: none;
@@ -145,10 +139,8 @@ }
     &:not(.placeholder):before {
-      display: ${props => (props.readOnly ? "none" : "inline-block")};
-      font-family: ${props => props.theme.fontFamilyMono};
-      color: ${props => props.theme.textSecondary};
-      font-size: 13px;
+      display: ${(props) => (props.readOnly ? "none" : "inline-block")};
+      font-family: ${(props) => props.theme.fontFamilyMono};
+      color: ${(props) => props.theme.textSecondary};
+      font-size: ${({ fontScale }) => fontScale * 13}px;
       line-height: 0;
-      margin-${props => (props.rtl ? "right" : "left")}: -24px;
-      transition: opacity 150ms ease-in-out;
-      opacity: 0;
+      margin-${(props) => (props.rtl ? "right" : "left")}: -24px;
       width: 24px;
@@ -173,3 +165,3 @@ }
   .heading-name {
-    color: ${props => props.theme.text};
+    color: ${(props) => props.theme.text};
 
@@ -192,36 +184,4 @@ &:hover {
 
-  h1:not(.placeholder):before {
-    content: "H1";
-  }
-  h2:not(.placeholder):before {
-    content: "H2";
-  }
-  h3:not(.placeholder):before {
-    content: "H3";
-  }
-  h4:not(.placeholder):before {
-    content: "H4";
-  }
-  h5:not(.placeholder):before {
-    content: "H5";
-  }
-  h6:not(.placeholder):before {
-    content: "H6";
-  }
-
-  .ProseMirror-focused {
-    h1,
-    h2,
-    h3,
-    h4,
-    h5,
-    h6 {
-      &:not(.placeholder):before {
-        opacity: 1;
-      }
-    }
-  }
-
   .with-emoji {
-    margin-${props => (props.rtl ? "right" : "left")}: -1em;
+    margin-${(props) => (props.rtl ? "right" : "left")}: -1em;
   }
@@ -232,3 +192,3 @@
     display: inline-block;
-    color: ${props => props.theme.text};
+    color: ${(props) => props.theme.text};
     opacity: .75;
@@ -242,4 +202,4 @@ cursor: pointer;
     text-align: left;
-    font-family: ${props => props.theme.fontFamilyMono};
-    font-size: 14px;
+    font-family: ${(props) => props.theme.fontFamilyMono};
+    font-size: ${({ fontScale }) => fontScale * 14}px;;
     line-height: 0;
@@ -257,10 +217,8 @@ width: 12px;
     opacity: 0;
-    background: ${props => props.theme.background};
-    margin-${props => (props.rtl ? "right" : "left")}: -26px;
-    flex-direction: ${props => (props.rtl ? "row-reverse" : "row")};
+    background: ${(props) => props.theme.background};
+    margin-${(props) => (props.rtl ? "right" : "left")}: -26px;
+    flex-direction: ${(props) => (props.rtl ? "row-reverse" : "row")};
     display: inline-flex;
     position: relative;
-    top: -2px;
     width: 26px;
-    height: 24px;
 
@@ -280,2 +238,26 @@ &.collapsed {
 
+  h1 {
+    .heading-actions {
+      top: 0;
+    }
+  }
+
+  h2 {
+    .heading-actions {
+      top: 3px;
+    }
+  }
+
+  h3 {
+    .heading-actions {
+      top: 5px;
+    }
+  }
+
+  h4 {
+    .heading-actions {
+      top: 6px;
+    }
+  }
+
   h1,
@@ -303,3 +285,3 @@ h2,
     &.collapsed {
-      transform: rotate(${props => (props.rtl ? "90deg" : "-90deg")});
+      transform: rotate(${(props) => (props.rtl ? "90deg" : "-90deg")});
       transition-delay: 0.1s;
@@ -314,6 +296,6 @@ opacity: 1;
     transition: opacity 150ms ease-in-out;
-    content: ${props => (props.readOnly ? "" : "attr(data-empty-text)")};
+    content: ${(props) => (props.readOnly ? "" : "attr(data-empty-text)")};
     pointer-events: none;
     height: 0;
-    color: ${props => props.theme.placeholder};
+    color: ${(props) => props.theme.placeholder};
   }
@@ -331,4 +313,4 @@
     align-items: center;
-    background: ${props => props.theme.noticeInfoBackground};
-    color: ${props => props.theme.noticeInfoText};
+    background: ${(props) => props.theme.noticeInfoBackground};
+    color: ${(props) => props.theme.noticeInfoText};
     border-radius: 4px;
@@ -339,3 +321,3 @@ padding: 8px 16px;
     a {
-      color: ${props => props.theme.noticeInfoText};
+      color: ${(props) => props.theme.noticeInfoText};
     }
@@ -357,3 +339,3 @@
     align-self: flex-start;
-    margin-${props => (props.rtl ? "left" : "right")}: 4px;
+    margin-${(props) => (props.rtl ? "left" : "right")}: 4px;
     position: relative;
@@ -364,7 +346,7 @@ top: 1px;
   .notice-block.tip {
-    background: ${props => props.theme.noticeTipBackground};
-    color: ${props => props.theme.noticeTipText};
+    background: ${(props) => props.theme.noticeTipBackground};
+    color: ${(props) => props.theme.noticeTipText};
 
     a {
-      color: ${props => props.theme.noticeTipText};
+      color: ${(props) => props.theme.noticeTipText};
     }
@@ -374,7 +356,7 @@ }
   .notice-block.warning {
-    background: ${props => props.theme.noticeWarningBackground};
-    color: ${props => props.theme.noticeWarningText};
+    background: ${(props) => props.theme.noticeWarningBackground};
+    color: ${(props) => props.theme.noticeWarningText};
 
     a {
-      color: ${props => props.theme.noticeWarningText};
+      color: ${(props) => props.theme.noticeWarningText};
     }
@@ -396,6 +378,6 @@ }
       position: absolute;
-      margin-${props => (props.rtl ? "right" : "left")}: -1.5em;
+      margin-${(props) => (props.rtl ? "right" : "left")}: -1.5em;
       top: 0;
       bottom: 0;
-      background: ${props => props.theme.quote};
+      background: ${(props) => props.theme.quote};
     }
@@ -410,4 +392,4 @@ }
   .template-placeholder {
-    color: ${props => props.theme.placeholder};
-    border-bottom: 1px dotted ${props => props.theme.placeholder};
+    color: ${(props) => props.theme.placeholder};
+    border-bottom: 1px dotted ${(props) => props.theme.placeholder};
     border-radius: 2px;
@@ -418,3 +400,3 @@ cursor: text;
       border-bottom: 1px dotted
-        ${props => props.readOnly ? props.theme.placeholder : props.theme.textSecondary};
+        ${(props) => props.readOnly ? props.theme.placeholder : props.theme.textSecondary};
     }
@@ -425,2 +407,3 @@ }
     margin: 0;
+    line-height: 32px;
 
@@ -433,3 +416,3 @@ span:first-child + br:last-child {
   a {
-    color: ${props => props.theme.link};
+    color: ${(props) => props.theme.link};
     cursor: pointer;
@@ -439,3 +422,3 @@ }
   a:hover {
-    text-decoration: ${props => (props.readOnly ? "underline" : "none")};
+    text-decoration: ${(props) => (props.readOnly ? "underline" : "none")};
   }
@@ -445,4 +428,4 @@
   ol {
-    margin: ${props => (props.rtl ? "0 -26px 0 0.1em" : "0 0.1em 0 -26px")};
-    padding: ${props => (props.rtl ? "0 44px 0 0" : "0 0 0 44px")};
+    margin: ${(props) => (props.rtl ? "0 0 0 0.1em" : "0 0.1em 0 0")};
+    padding: ${(props) => (props.rtl ? "0 36px 0 0" : "0 0 0 36px")};
   }
@@ -461,3 +444,3 @@
     padding: 0;
-    margin: ${props => (props.rtl ? "0 -24px 0 0" : "0 0 0 -24px")};
+    margin: ${(props) => (props.rtl ? "0 -24px 0 0" : "0 0 0 -24px")};
   }
@@ -481,16 +464,19 @@
     display: flex;
-    padding-${props => (props.rtl ? "right" : "left")}: 24px;
+    padding-${(props) => (props.rtl ? "right" : "left")}: 24px;
   }
 
   ul.checkbox_list li.checked > div > p {
-    color: ${props => props.theme.textSecondary};
+    color: ${(props) => props.theme.textSecondary};
     text-decoration: line-through;
   }
+ 
+  p {
+      margin-bottom: ${({ fontScale }) => fontScale * 5}px; !important;
+  }
 
   ul li::before,
   ol li::before {
-    background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iOCIgeT0iNyIgd2lkdGg9IjMiIGhlaWdodD0iMiIgcng9IjEiIGZpbGw9IiM0RTVDNkUiLz4KPHJlY3QgeD0iOCIgeT0iMTEiIHdpZHRoPSIzIiBoZWlnaHQ9IjIiIHJ4PSIxIiBmaWxsPSIjNEU1QzZFIi8+CjxyZWN0IHg9IjgiIHk9IjE1IiB3aWR0aD0iMyIgaGVpZ2h0PSIyIiByeD0iMSIgZmlsbD0iIzRFNUM2RSIvPgo8cmVjdCB4PSIxMyIgeT0iNyIgd2lkdGg9IjMiIGhlaWdodD0iMiIgcng9IjEiIGZpbGw9IiM0RTVDNkUiLz4KPHJlY3QgeD0iMTMiIHk9IjExIiB3aWR0aD0iMyIgaGVpZ2h0PSIyIiByeD0iMSIgZmlsbD0iIzRFNUM2RSIvPgo8cmVjdCB4PSIxMyIgeT0iMTUiIHdpZHRoPSIzIiBoZWlnaHQ9IjIiIHJ4PSIxIiBmaWxsPSIjNEU1QzZFIi8+Cjwvc3ZnPgo=") no-repeat;
-    background-position: 0 2px;
+    background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iOCIgeT0iNyIgd2lkdGg9IjMiIGhlaWdodD0iMiIgcng9IjEiIGZpbGw9IiM0RTVDNkUiLz4KPHJlY3QgeD0iOCIgeT0iMTEiIHdpZHRoPSIzIiBoZWlnaHQ9IjIiIHJ4PSIxIiBmaWxsPSIjNEU1QzZFIi8+CjxyZWN0IHg9IjgiIHk9IjE1IiB3aWR0aD0iMyIgaGVpZ2h0PSIyIiByeD0iMSIgZmlsbD0iIzRFNUM2RSIvPgo8cmVjdCB4PSIxMyIgeT0iNyIgd2lkdGg9IjMiIGhlaWdodD0iMiIgcng9IjEiIGZpbGw9IiM0RTVDNkUiLz4KPHJlY3QgeD0iMTMiIHk9IjExIiB3aWR0aD0iMyIgaGVpZ2h0PSIyIiByeD0iMSIgZmlsbD0iIzRFNUM2RSIvPgo8cmVjdCB4PSIxMyIgeT0iMTUiIHdpZHRoPSIzIiBoZWlnaHQ9IjIiIHJ4PSIxIiBmaWxsPSIjNEU1QzZFIi8+Cjwvc3ZnPgo=") no-repeat 0 3px;
     content: "";
-    display: ${props => (props.readOnly ? "none" : "inline-block")};
+    display: ${(props) => (props.readOnly ? "none" : "inline-block")};
     cursor: grab;
@@ -500,5 +486,6 @@ width: 24px;
     position: absolute;
-    ${props => (props.rtl ? "right" : "left")}: -40px;
+    ${(props) => (props.rtl ? "right" : "left")}: ${({ fontScale }) => (fontScale * (fontScale < 1 ? 1.1 : 0.95)) * -46}px;
     opacity: 0;
     transition: opacity 200ms ease-in-out;
+    top: ${({ fontScale }) => fontScale > 1 ? 2 * fontScale : 0}px;
   }
@@ -513,3 +500,3 @@
   ol li.counter-2::before {
-    ${props => (props.rtl ? "right" : "left")}: -50px;
+    ${(props) => (props.rtl ? "right" : "left")}: -50px;
   }
@@ -528,3 +515,3 @@
   ul.checkbox_list li::before {
-    ${props => (props.rtl ? "right" : "left")}: 0;
+    ${(props) => (props.rtl ? "right" : "left")}: 0;
   }
@@ -534,11 +521,13 @@
     cursor: pointer;
-    pointer-events: ${props => props.readOnly && !props.readOnlyWriteCheckboxes ? "none" : "initial"};
-    opacity: ${props => props.readOnly && !props.readOnlyWriteCheckboxes ? 0.75 : 1};
-    margin: ${props => (props.rtl ? "0.5em 0 0 0.5em" : "0.5em 0.5em 0 0")};
-    width: 14px;
-    height: 14px;
+    pointer-events: ${(props) => props.readOnly && !props.readOnlyWriteCheckboxes ? "none" : "initial"};
+    opacity: ${(props) => props.readOnly && !props.readOnlyWriteCheckboxes ? 0.75 : 1};
+    margin: ${({ rtl, fontScale }) => rtl ? `${fontScale < 1 ? 0.65 : 0.6}rem 0 0 0.5em` : `${fontScale < 1 ? 0.65 : 0.6}rem 0.5em 0 0`};
+    width: ${({ fontScale }) => fontScale * 14}px;
+    height: ${({ fontScale }) => fontScale * 14}px;
   }
 
   li p:first-child {
-    margin: 0;
+    margin-top: 0;
+    margin-left: 0;
+    margin-right: 0;
     word-break: break-word;
@@ -557,3 +546,3 @@ }
     position: absolute;
-    border-top: 1px solid ${props => props.theme.horizontalRule};
+    border-top: 1px solid ${(props) => props.theme.horizontalRule};
     top: 0.5em;
@@ -569,3 +558,3 @@ left: 0;
   hr.page-break:before {
-    border-top: 1px dashed ${props => props.theme.horizontalRule};
+    border-top: 1px dashed ${(props) => props.theme.horizontalRule};
   }
@@ -575,7 +564,6 @@
     border-radius: 4px;
-    border: 1px solid ${props => props.theme.codeBorder};
-    background: ${props => props.theme.codeBackground};
+    border: 1px solid ${(props) => props.theme.codeBorder};
     padding: 3px 4px;
-    font-family: ${props => props.theme.fontFamilyMono};
-    font-size: 80%;
+    font-family: ${(props) => props.theme.fontFamilyMono};
+    font-size: 85%;
   }
@@ -585,8 +573,28 @@
     border-radius: 1px;
-    color: ${props => props.theme.textHighlightForeground};
-    background: ${props => props.theme.textHighlight};
+    background: transparent;
 
     a {
-      color: ${props => props.theme.textHighlightForeground};
+      color: ${(props) => props.theme.textHighlightForeground};
     }
+
+    &.red {
+        background: ${(props) => props.theme.highlights["red"]};
+    }
+
+    &.orange {
+        background: ${(props) => props.theme.highlights["orange"]};
+    }
+
+    &.yellow {
+        background: ${(props) => props.theme.highlights["yellow"]};
+    }
+
+    &.green {
+        background: ${(props) => props.theme.highlights["green"]};
+    }
+
+    &.blue {
+        background: ${(props) => props.theme.highlights["blue"]};
+    }
+
   }
@@ -600,6 +608,6 @@
     button {
-      background: ${props => props.theme.blockToolbarBackground};
-      color: ${props => props.theme.blockToolbarItem};
+      background: ${(props) => props.theme.blockToolbarBackground};
+      color: ${(props) => props.theme.blockToolbarItem};
       border-width: 1px;
-      font-size: 13px;
+      font-size: ${({ fontScale }) => fontScale * 13}px;;
       display: none;
@@ -623,3 +631,3 @@ position: absolute;
       button {
-        ${props => (props.rtl ? "left" : "right")}: 4px;
+        ${(props) => (props.rtl ? "left" : "right")}: 4px;
       }
@@ -634,7 +642,7 @@ }
       select {
-        display: ${props => (props.readOnly ? "none" : "inline")};
+        display: ${(props) => (props.readOnly ? "none" : "inline")};
       }
 
       button {
-        display: ${props => (props.readOnly ? "inline" : "none")};
+        display: ${(props) => (props.readOnly ? "inline" : "none")};
       }
@@ -655,9 +663,9 @@ }
     position: relative;
-    background: ${props => props.theme.codeBackground};
+    background: ${(props) => props.theme.codeBackground};
     border-radius: 4px;
-    border: 1px solid ${props => props.theme.codeBorder};
+    border: 1px solid ${(props) => props.theme.codeBorder};
 
     -webkit-font-smoothing: initial;
-    font-family: ${props => props.theme.fontFamilyMono};
-    font-size: 13px;
+    font-family: ${(props) => props.theme.fontFamilyMono};
+    font-size: ${({ fontScale }) => fontScale * 13}px;
     direction: ltr;
@@ -675,7 +683,7 @@ text-align: left;
     hyphens: none;
-    color: ${props => props.theme.code};
+    color: ${(props) => props.theme.code};
     margin: 0;
 
     code {
-      font-size: 13px;
+      font-size: ${({ fontScale }) => fontScale * 13}px;
       background: none;
@@ -691,7 +699,7 @@ padding: 0;
   .token.cdata {
-    color: ${props => props.theme.codeComment};
+    color: ${(props) => props.theme.codeComment};
   }
 
   .token.punctuation {
-    color: ${props => props.theme.codePunctuation};
+    color: ${(props) => props.theme.codePunctuation};
   }
@@ -706,23 +714,23 @@
   .token.number {
-    color: ${props => props.theme.codeNumber};
+    color: ${(props) => props.theme.codeNumber};
   }
 
   .token.property {
-    color: ${props => props.theme.codeProperty};
+    color: ${(props) => props.theme.codeProperty};
   }
 
   .token.tag {
-    color: ${props => props.theme.codeTag};
+    color: ${(props) => props.theme.codeTag};
   }
 
   .token.string {
-    color: ${props => props.theme.codeString};
+    color: ${(props) => props.theme.codeString};
   }
 
   .token.selector {
-    color: ${props => props.theme.codeSelector};
+    color: ${(props) => props.theme.codeSelector};
   }
 
   .token.attr-name {
-    color: ${props => props.theme.codeAttr};
+    color: ${(props) => props.theme.codeAttr};
   }
@@ -734,3 +742,3 @@
   .style .token.string {
-    color: ${props => props.theme.codeEntity};
+    color: ${(props) => props.theme.codeEntity};
   }
@@ -743,7 +751,7 @@
   .token.unit {
-    color: ${props => props.theme.codeKeyword};
+    color: ${(props) => props.theme.codeKeyword};
   }
 
   .token.function {
-    color: ${props => props.theme.codeFunction};
+    color: ${(props) => props.theme.codeFunction};
   }
@@ -754,3 +762,3 @@
   .token.atrule {
-    color: ${props => props.theme.codeStatement};
+    color: ${(props) => props.theme.codeStatement};
   }
@@ -760,3 +768,3 @@
   .token.variable {
-    color: ${props => props.theme.codePlaceholder};
+    color: ${(props) => props.theme.codePlaceholder};
   }
@@ -769,3 +777,3 @@
   .token.inserted {
-    border-bottom: 1px dotted ${props => props.theme.codeInserted};
+    border-bottom: 1px dotted ${(props) => props.theme.codeInserted};
     text-decoration: none;
@@ -784,3 +792,3 @@ }
   .token.important {
-    color: ${props => props.theme.codeImportant};
+    color: ${(props) => props.theme.codeImportant};
   }
@@ -805,7 +813,7 @@
       position: relative;
-      border-bottom: 1px solid ${props => props.theme.tableDivider};
+      border-bottom: 1px solid ${(props) => props.theme.tableDivider};
     }
 
     th {
-      background: ${props => props.theme.tableHeaderBackground};
+      background: ${(props) => props.theme.tableHeaderBackground};
     }
@@ -817,6 +825,6 @@
       vertical-align: top;
-      border: 1px solid ${props => props.theme.tableDivider};
+      border: 1px solid ${(props) => props.theme.tableDivider};
       position: relative;
       padding: 4px 8px;
-      text-align: ${props => (props.rtl ? "right" : "left")};
+      text-align: ${(props) => (props.rtl ? "right" : "left")};
       min-width: 100px;
@@ -826,3 +834,3 @@ }
     .selectedCell {
-      background: ${props => props.readOnly ? "inherit" : props.theme.tableSelectedBackground};
+      background: ${(props) => props.readOnly ? "inherit" : props.theme.tableSelectedBackground};
 
@@ -844,21 +852,21 @@ /* fixes Firefox background color painting over border:
         top: -16px;
-        ${props => (props.rtl ? "right" : "left")}: 0;
+        ${(props) => (props.rtl ? "right" : "left")}: 0;
         width: 100%;
         height: 12px;
-        background: ${props => props.theme.tableDivider};
-        border-bottom: 3px solid ${props => props.theme.background};
-        display: ${props => (props.readOnly ? "none" : "block")};
+        background: ${(props) => props.theme.tableDivider};
+        border-bottom: 3px solid ${(props) => props.theme.background};
+        display: ${(props) => (props.readOnly ? "none" : "block")};
       }
 
       &:hover::after {
-        background: ${props => props.theme.text};
+        background: ${(props) => props.theme.text};
       }
       &.first::after {
-        border-top-${props => (props.rtl ? "right" : "left")}-radius: 3px;
+        border-top-${(props) => (props.rtl ? "right" : "left")}-radius: 3px;
       }
       &.last::after {
-        border-top-${props => (props.rtl ? "left" : "right")}-radius: 3px;
+        border-top-${(props) => (props.rtl ? "left" : "right")}-radius: 3px;
       }
       &.selected::after {
-        background: ${props => props.theme.tableSelected};
+        background: ${(props) => props.theme.tableSelected};
       }
@@ -872,23 +880,23 @@ }
         position: absolute;
-        ${props => (props.rtl ? "right" : "left")}: -16px;
+        ${(props) => (props.rtl ? "right" : "left")}: -16px;
         top: 0;
         height: 100%;
         width: 12px;
-        background: ${props => props.theme.tableDivider};
-        border-${props => (props.rtl ? "left" : "right")}: 3px solid;
-        border-color: ${props => props.theme.background};
-        display: ${props => (props.readOnly ? "none" : "block")};
+        background: ${(props) => props.theme.tableDivider};
+        border-${(props) => (props.rtl ? "left" : "right")}: 3px solid;
+        border-color: ${(props) => props.theme.background};
+        display: ${(props) => (props.readOnly ? "none" : "block")};
       }
 
       &:hover::after {
-        background: ${props => props.theme.text};
+        background: ${(props) => props.theme.text};
       }
       &.first::after {
-        border-top-${props => (props.rtl ? "right" : "left")}-radius: 3px;
+        border-top-${(props) => (props.rtl ? "right" : "left")}-radius: 3px;
       }
       &.last::after {
-        border-bottom-${props => (props.rtl ? "right" : "left")}-radius: 3px;
+        border-bottom-${(props) => (props.rtl ? "right" : "left")}-radius: 3px;
       }
       &.selected::after {
-        background: ${props => props.theme.tableSelected};
+        background: ${(props) => props.theme.tableSelected};
       }
@@ -901,18 +909,18 @@ }
         cursor: pointer;
-        background: ${props => props.theme.tableDivider};
+        background: ${(props) => props.theme.tableDivider};
         width: 13px;
         height: 13px;
         border-radius: 13px;
-        border: 2px solid ${props => props.theme.background};
+        border: 2px solid ${(props) => props.theme.background};
         position: absolute;
         top: -18px;
-        ${props => (props.rtl ? "right" : "left")}: -18px;
-        display: ${props => (props.readOnly ? "none" : "block")};
+        ${(props) => (props.rtl ? "right" : "left")}: -18px;
+        display: ${(props) => (props.readOnly ? "none" : "block")};
       }
 
       &:hover::after {
-        background: ${props => props.theme.text};
+        background: ${(props) => props.theme.text};
       }
       &.selected::after {
-        background: ${props => props.theme.tableSelected};
+        background: ${(props) => props.theme.tableSelected};
       }
@@ -929,3 +937,3 @@ }
     &:hover {
-      scrollbar-color: ${props => props.theme.scrollbarThumb} ${props => props.theme.scrollbarBackground};
+      scrollbar-color: ${(props) => props.theme.scrollbarThumb} ${(props) => props.theme.scrollbarBackground};
     }
@@ -939,3 +947,3 @@
     &:hover ::-webkit-scrollbar {
-      background-color: ${props => props.theme.scrollbarBackground};
+      background-color: ${(props) => props.theme.scrollbarBackground};
     }
@@ -950,4 +958,4 @@
     &:hover ::-webkit-scrollbar-thumb {
-      background-color: ${props => props.theme.scrollbarThumb};
-      border-color: ${props => props.theme.scrollbarBackground};
+      background-color: ${(props) => props.theme.scrollbarThumb};
+      border-color: ${(props) => props.theme.scrollbarBackground};
     }
@@ -959,6 +967,6 @@ }
     overflow-x: auto;
-    padding-${props => (props.rtl ? "right" : "left")}: 1em;
-    margin-${props => (props.rtl ? "right" : "left")}: -1em;
-    border-${props => (props.rtl ? "right" : "left")}: 1px solid transparent;
-    border-${props => (props.rtl ? "left" : "right")}: 1px solid transparent;
+    padding-${(props) => (props.rtl ? "right" : "left")}: 1em;
+    margin-${(props) => (props.rtl ? "right" : "left")}: -1em;
+    border-${(props) => (props.rtl ? "right" : "left")}: 1px solid transparent;
+    border-${(props) => (props.rtl ? "left" : "right")}: 1px solid transparent;
     transition: border 250ms ease-in-out 0s;
@@ -971,7 +979,7 @@ }
     bottom: 0;
-    ${props => (props.rtl ? "right" : "left")}: -1em;
+    ${(props) => (props.rtl ? "right" : "left")}: -1em;
     width: 16px;
     transition: box-shadow 250ms ease-in-out;
     border: 0px solid transparent;
-    border-${props => (props.rtl ? "right" : "left")}-width: 1em;
+    border-${(props) => (props.rtl ? "right" : "left")}-width: 1em;
     pointer-events: none;
@@ -981,3 +989,3 @@
       box-shadow: 16px 0 16px -16px inset rgba(0, 0, 0, 0.25);
-      border-left: 1em solid ${props => props.theme.background};
+      border-left: 1em solid ${(props) => props.theme.background};
     }
@@ -995,6 +1003,6 @@
     pointer-events: none;
-    display: ${props => (props.readOnly ? "none" : "inline")};
+    display: ${(props) => (props.readOnly ? "none" : "inline")};
     width: 24px;
     height: 24px;
-    color: ${props => props.theme.textSecondary};
+    color: ${(props) => props.theme.textSecondary};
     background: none;
@@ -1008,4 +1016,4 @@ position: absolute;
     padding: 0;
-    margin-top: 1px;
-    margin-${props => (props.rtl ? "right" : "left")}: -24px;
+    margin-top: 4px;
+    margin-${(props) => (props.rtl ? "right" : "left")}: -24px;
 
@@ -1016,3 +1024,3 @@ &:hover,
       transform: scale(1.2);
-      color: ${props => props.theme.text};
+      color: ${(props) => props.theme.text};
     }
@@ -1040,3 +1048,3 @@ }
     width: 20px;
-    border-top: 1px solid ${props => props.theme.cursor};
+    border-top: 1px solid ${(props) => props.theme.cursor};
     animation: ProseMirror-cursor-blink 1.1s steps(2, start) infinite;
@@ -1078,3 +1086,3 @@ }
     blockquote {
-      font-family: "SF Pro Text", ${props => props.theme.fontFamily};
+      font-family: "SF Pro Text", ${(props) => props.theme.fontFamily};
     }
@@ -1081,0 +1089,0 @@ }

dist/styles/theme.d.ts

@@ -32,3 +32,3 @@ export declare const base: {
     blockToolbarItem: string;
-    blockToolbarIcon: undefined;
+    blockToolbarIcon: string;
     blockToolbarIconSelected: string;
@@ -46,2 +46,3 @@ blockToolbarText: string;
     noticeWarningText: string;
+    black: string;
     almostBlack: string;
@@ -52,3 +53,2 @@ lightBlack: string;
     white10: string;
-    black: string;
     black10: string;
@@ -60,2 +60,16 @@ primary: string;
     greyDark: string;
+    knowtOffWhite: string;
+    knowtOffWhite2: string;
+    knowtGreen: string;
+    knowtGreyLight: string;
+    knowtGrey: string;
+    knowtGreyMid: string;
+    knowtGreyStrong: string;
+    highlights: {
+        red: string;
+        orange: string;
+        yellow: string;
+        green: string;
+        blue: string;
+    };
 };
@@ -112,3 +126,3 @@ export declare const light: {
     blockToolbarItem: string;
-    blockToolbarIcon: undefined;
+    blockToolbarIcon: string;
     blockToolbarIconSelected: string;
@@ -126,2 +140,3 @@ blockToolbarText: string;
     noticeWarningText: string;
+    black: string;
     almostBlack: string;
@@ -132,3 +147,2 @@ lightBlack: string;
     white10: string;
-    black: string;
     black10: string;
@@ -140,2 +154,16 @@ primary: string;
     greyDark: string;
+    knowtOffWhite: string;
+    knowtOffWhite2: string;
+    knowtGreen: string;
+    knowtGreyLight: string;
+    knowtGrey: string;
+    knowtGreyMid: string;
+    knowtGreyStrong: string;
+    highlights: {
+        red: string;
+        orange: string;
+        yellow: string;
+        green: string;
+        blue: string;
+    };
 };
@@ -192,3 +220,3 @@ export declare const dark: {
     blockToolbarItem: string;
-    blockToolbarIcon: undefined;
+    blockToolbarIcon: string;
     blockToolbarIconSelected: string;
@@ -206,2 +234,3 @@ blockToolbarText: string;
     noticeWarningText: string;
+    black: string;
     almostBlack: string;
@@ -212,3 +241,2 @@ lightBlack: string;
     white10: string;
-    black: string;
     black10: string;
@@ -220,4 +248,18 @@ primary: string;
     greyDark: string;
+    knowtOffWhite: string;
+    knowtOffWhite2: string;
+    knowtGreen: string;
+    knowtGreyLight: string;
+    knowtGrey: string;
+    knowtGreyMid: string;
+    knowtGreyStrong: string;
+    highlights: {
+        red: string;
+        orange: string;
+        yellow: string;
+        green: string;
+        blue: string;
+    };
 };
 export default light;
 //# sourceMappingURL=theme.d.ts.map

dist/styles/theme.js

@@ -5,2 +5,3 @@ "use strict";
 const colors = {
+    black: "#000",
     almostBlack: "#181A1B",
@@ -11,3 +12,2 @@ lightBlack: "#2F3336",
     white10: "rgba(255, 255, 255, 0.1)",
-    black: "#000",
     black10: "rgba(0, 0, 0, 0.1)",
@@ -19,4 +19,18 @@ primary: "#1AB6FF",
     greyDark: "#DAE1E9",
+    knowtOffWhite: "#F7F7F7",
+    knowtOffWhite2: "#FAFAFA",
+    knowtGreen: "#50D2C2",
+    knowtGreyLight: "#F1F0F1",
+    knowtGrey: "#E9E9E9",
+    knowtGreyMid: "#BBB",
+    knowtGreyStrong: "#666666",
+    highlights: {
+        red: "#FFDBDB",
+        orange: "#FCE7D2",
+        yellow: "#FFFCCF",
+        green: "#E4FCD7",
+        blue: "#D9EDFF",
+    },
 };
-exports.base = Object.assign(Object.assign({}, colors), { fontFamily: "-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen, Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif", fontFamilyMono: "'SFMono-Regular',Consolas,'Liberation Mono', Menlo, Courier,monospace", fontWeight: 400, zIndex: 100, link: colors.primary, placeholder: "#B1BECC", textSecondary: "#4E5C6E", textLight: colors.white, textHighlight: "#b3e7ff", textHighlightForeground: colors.black, selected: colors.primary, codeComment: "#6a737d", codePunctuation: "#5e6687", codeNumber: "#d73a49", codeProperty: "#c08b30", codeTag: "#3d8fd1", codeString: "#032f62", codeSelector: "#6679cc", codeAttr: "#c76b29", codeEntity: "#22a2c9", codeKeyword: "#d73a49", codeFunction: "#6f42c1", codeStatement: "#22a2c9", codePlaceholder: "#3d8fd1", codeInserted: "#202746", codeImportant: "#c94922", blockToolbarBackground: colors.white, blockToolbarTrigger: colors.greyMid, blockToolbarTriggerIcon: colors.white, blockToolbarItem: colors.almostBlack, blockToolbarIcon: undefined, blockToolbarIconSelected: colors.black, blockToolbarText: colors.almostBlack, blockToolbarTextSelected: colors.black, blockToolbarSelectedBackground: colors.greyMid, blockToolbarHoverBackground: colors.greyLight, blockToolbarDivider: colors.greyMid, noticeInfoBackground: "#F5BE31", noticeInfoText: colors.almostBlack, noticeTipBackground: "#9E5CF7", noticeTipText: colors.white, noticeWarningBackground: "#FF5C80", noticeWarningText: colors.white });
+exports.base = Object.assign(Object.assign({}, colors), { fontFamily: "-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen, Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif", fontFamilyMono: "'SFMono-Regular',Consolas,'Liberation Mono', Menlo, Courier,monospace", fontWeight: 400, zIndex: 100, link: colors.primary, placeholder: colors.knowtGreyMid, textSecondary: "#4E5C6E", textLight: colors.white, textHighlight: "#b3e7ff", textHighlightForeground: colors.black, selected: colors.primary, codeComment: "#6a737d", codePunctuation: "#5e6687", codeNumber: "#d73a49", codeProperty: "#c08b30", codeTag: "#3d8fd1", codeString: "#032f62", codeSelector: "#6679cc", codeAttr: "#c76b29", codeEntity: "#22a2c9", codeKeyword: "#d73a49", codeFunction: "#6f42c1", codeStatement: "#22a2c9", codePlaceholder: "#3d8fd1", codeInserted: "#202746", codeImportant: "#c94922", blockToolbarBackground: colors.white, blockToolbarTrigger: colors.greyMid, blockToolbarTriggerIcon: colors.white, blockToolbarItem: colors.almostBlack, blockToolbarIcon: colors.knowtGreyStrong, blockToolbarIconSelected: colors.black, blockToolbarText: colors.black, blockToolbarTextSelected: colors.black, blockToolbarSelectedBackground: colors.knowtOffWhite, blockToolbarHoverBackground: colors.knowtOffWhite2, blockToolbarDivider: colors.knowtGrey, noticeInfoBackground: "#F5BE31", noticeInfoText: colors.almostBlack, noticeTipBackground: "#9E5CF7", noticeTipText: colors.white, noticeWarningBackground: "#FF5C80", noticeWarningText: colors.white });
 exports.light = Object.assign(Object.assign({}, exports.base), { background: colors.white, text: colors.almostBlack, code: colors.lightBlack, cursor: colors.black, divider: colors.greyMid, toolbarBackground: colors.lightBlack, toolbarHoverBackground: colors.black, toolbarInput: colors.white10, toolbarItem: colors.white, tableDivider: colors.greyMid, tableSelected: colors.primary, tableSelectedBackground: "#E5F7FF", quote: colors.greyDark, codeBackground: colors.greyLight, codeBorder: colors.grey, horizontalRule: colors.greyMid, imageErrorBackground: colors.greyLight, scrollbarBackground: colors.greyLight, scrollbarThumb: colors.greyMid });
@@ -23,0 +37,0 @@ exports.dark = Object.assign(Object.assign({}, exports.base), { background: colors.almostBlack, text: colors.almostWhite, code: colors.almostWhite, cursor: colors.white, divider: "#4E5C6E", placeholder: "#52657A", toolbarBackground: colors.white, toolbarHoverBackground: colors.greyMid, toolbarInput: colors.black10, toolbarItem: colors.lightBlack, tableDivider: colors.lightBlack, tableSelected: colors.primary, tableSelectedBackground: "#002333", quote: colors.greyDark, codeBackground: colors.black, codeBorder: colors.lightBlack, codeString: "#3d8fd1", horizontalRule: colors.lightBlack, imageErrorBackground: "rgba(0, 0, 0, 0.5)", scrollbarBackground: colors.black, scrollbarThumb: colors.lightBlack });

dist/types/index.d.ts

@@ -9,2 +9,11 @@ import * as React from "react";
     icon?: typeof React.Component | React.FC<any>;
+    iconColor?: string;
+    iconSVGProps?: {
+        r?: number;
+        cx?: number;
+        cy?: number;
+        fill?: string;
+        stroke?: string;
+        strokeWidth?: number;
+    };
     name?: string;
@@ -14,2 +23,3 @@ title?: string;
     keywords?: string;
+    searchKeyword?: string;
     tooltip?: string;
@@ -20,2 +30,3 @@ defaultHidden?: boolean;
     active?: (state: EditorState) => boolean;
+    customOnClick?: () => void;
 };
@@ -26,2 +37,16 @@ export declare type EmbedDescriptor = MenuItem & {
 };
+export declare type MenuPosition = {
+    left: number;
+    top?: number;
+    bottom?: number;
+    isAbove?: boolean;
+    updatedAt: number;
+};
+export declare type GroupMenuItem = {
+    groupData: GroupData;
+    items: (MenuItem | EmbedDescriptor)[];
+};
+export declare type GroupData = {
+    name: string;
+};
 //# sourceMappingURL=index.d.ts.map

package.json

 {
   "name": "@wedevign/rich-markdown-editor",
   "description": "A rich text editor with Markdown shortcuts",
-  "version": "11.21.4",
+  "version": "12.0.0",
   "main": "dist/index.js",
@@ -10,3 +10,2 @@ "typings": "dist/index.d.ts",
     "test": "jest",
-    "lint": "tsc --noEmit && eslint '*/**/*.{js,ts,tsx}' --quiet",
     "start": "start-storybook -p 6006",
@@ -16,3 +15,4 @@ "build": "tsc",
     "watch": "yarn tsc-watch",
-    "build-storybook": "build-storybook"
+    "build-storybook": "build-storybook",
+    "publish": "npm publish --access public"
   },
@@ -36,2 +36,3 @@ "serve": {
     "markdown-it-emoji": "^2.0.0",
+    "markdown-it-imsize": "Knowt/markdown-it-imsize",
     "outline-icons": "^1.38.1",
@@ -52,3 +53,2 @@ "prosemirror-commands": "^1.1.6",
     "prosemirror-view": "1.18.1",
-    "react-medium-image-zoom": "^3.1.3",
     "react-portal": "^4.2.1",
@@ -89,20 +89,8 @@ "refractor": "^3.3.1",
     "@types/prosemirror-view": "^1.11.4",
-    "@types/react": "^16.9.19",
     "@types/react-dom": "^16.9.5",
     "@types/refractor": "^2.8.0",
     "@types/styled-components": "^5.1.7",
-    "@typescript-eslint/eslint-plugin": "^4.15.2",
-    "@typescript-eslint/parser": "^4.15.2",
     "babel-jest": "^26.6.3",
     "babel-loader": "^8.2.2",
-    "eslint": "^7.20.0",
-    "eslint-config-prettier": "^6.15.0",
-    "eslint-config-react-app": "^6.0.0",
-    "eslint-plugin-import": "^2.22.0",
-    "eslint-plugin-jsx-a11y": "^6.4.1",
-    "eslint-plugin-prettier": "^3.1.4",
-    "eslint-plugin-react": "^7.21.5",
-    "eslint-plugin-react-hooks": "^4.0.8",
     "jest": "^26.6.3",
-    "prettier": "^1.19.1",
     "react": "^17.0.0",
@@ -109,0 +97,0 @@ "react-dom": "^17.0.0",

README.md

 [![npm version](https://badge.fury.io/js/rich-markdown-editor.svg)](https://badge.fury.io/js/rich-markdown-editor) [![CircleCI](https://img.shields.io/circleci/project/github/outline/rich-markdown-editor.svg)](https://circleci.com/gh/outline/rich-markdown-editor) [![Formatted with Prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat)](https://github.com/prettier/prettier) [![TypeScript](https://camo.githubusercontent.com/21132e0838961fbecb75077042aa9b15bc0bf6f9/68747470733a2f2f62616467656e2e6e65742f62616467652f4275696c74253230576974682f547970655363726970742f626c7565)](https://www.typescriptlang.org/) [![Sponsor](https://img.shields.io/static/v1?label=Sponsor&message=%E2%9D%A4&logo=GitHub)](https://github.com/sponsors/outline)
 
-
-
 # rich-markdown-editor
@@ -12,4 +10,2 @@
 
-
-
 ## Usage
@@ -36,5 +32,3 @@
 
-<Editor
-  defaultValue="Hello world!"
-/>
+<Editor defaultValue="Hello world!" />;
 ```
@@ -44,3 +38,2 @@
 
-
 ### Props
@@ -57,6 +50,2 @@
 
-#### `value`
-
-A markdown string that represents the value of the editor. Use this prop to change the value of the editor once mounted, **this will re-render the entire editor** and as such is only suitable when also in `readOnly` mode. Do not pipe the value of `onChange` back into `value`, the editor keeps it's own internal state and this will result in unexpected side effects.
-
 #### `placeholder`
@@ -103,7 +92,14 @@
 
+#### `fontScale`
+
+_Default: 1_
+
+Number to control the font size of the editor.
+
 #### `dir`
 
-*Default: `auto`*
+_Default: `auto`_
 
 Controls direction of the document. Possible values are:
+
 - `ltr`: Editor layout is optimized for LTR documents and the content is explicitly marked as LTR.
@@ -142,5 +138,5 @@ - `rtl`: Editor layout is optimized for RTL documents and the content is explicitly marked as RTL.
       defaultHidden: false,
-      matcher: href => href.matches(/docs.google.com/i),
-      component: GoogleDocEmbed
-    }
+      matcher: (href) => href.matches(/docs.google.com/i),
+      component: GoogleDocEmbed,
+    },
   ]}
@@ -158,3 +154,3 @@ />
 <Editor
-  uploadImage={async file => {
+  uploadImage={async (file) => {
     const result = await s3.upload(file);
@@ -224,5 +220,5 @@ return result.url;
 <Editor
-  onCreateLink={async title => {
+  onCreateLink={async (title) => {
     const url = await MyAPI.create({
-      title
+      title,
     });
@@ -241,3 +237,2 @@
 
-
 #### `onClickLink(href: string, event: MouseEvent): void`
@@ -247,3 +242,2 @@
 
-
 ```javascript
@@ -260,3 +254,3 @@ import { history } from "react-router";
   }}
-/>
+/>;
 ```
@@ -268,6 +262,5 @@
 
-
 ```javascript
 <Editor
-  onHoverLink={event => {
+  onHoverLink={(event) => {
     console.log(`Hovered link ${event.target.href}`);
@@ -286,6 +279,6 @@ }}
 <Editor
-  onClickHashtag={tag => {
+  onClickHashtag={(tag) => {
     history.push(`/hashtags/${tag}`);
   }}
-/>
+/>;
 ```
@@ -312,13 +305,19 @@
 
+#### `forceUpdateContent(value: string): void`
+
+Force update the editor content. Used to override the current content; also could be used to set the initial value, instead of relying on `defaultValue`.
+
 #### `focusAtStart(): void`
+
 Place the cursor at the start of the document and focus it.
 
 #### `focusAtEnd(): void`
+
 Place the cursor at the end of the document and focus it.
 
 #### `getHeadings(): { title: string, level: number, id: string }[]`
+
 Returns an array of objects with the text content of all the headings in the document,
 their level in the hierarchy, and the anchor id. This is useful to construct your own table of contents since the `toc` option was removed in v10.
 
-
 ## Contributing
@@ -325,0 +324,0 @@

tsconfig.json

 {
-  "compilerOptions": {
-    "sourceMap": true,
-    "strict": false,
-    "strictNullChecks": true,
-    "noImplicitAny": false,
-    "esModuleInterop": true,
-    "allowJs": true,
-    "resolveJsonModule": true,
-    "module": "commonjs",
-    "target": "es2017",
-    "lib": ["dom", "es2018"],
-    "jsx": "react",
-    "types": [
-      "react",
-      "jest"
+    "compilerOptions": {
+        "sourceMap": true,
+        "strict": false,
+        "strictNullChecks": true,
+        "noImplicitAny": false,
+        "esModuleInterop": true,
+        "allowJs": true,
+        "resolveJsonModule": true,
+        "module": "commonjs",
+        "target": "es2017",
+        "lib": [
+            "dom",
+            "es2018",
+            "es2019",
+        ],
+        "jsx": "react",
+        "types": [
+            "react",
+            "jest"
+        ],
+        "rootDir": "src",
+        "outDir": "dist",
+        "stripInternal": true,
+        "removeComments": true,
+        "declarationMap": true,
+        "declaration": true,
+    },
+    "include": [
+        "src/**/*"
     ],
-    "rootDir": "src",
-    "outDir": "dist",
-    "stripInternal": true,
-    "removeComments": true,
-    "declarationMap": true,
-    "declaration": true,
-  },
-  "include": [
-    "src/**/*"
-  ],
-  "exclude": [
-    "dist",
-    "node_modules"
-  ]
+    "exclude": [
+        "dist",
+        "node_modules"
+    ],
 }

New alerts

GitHub dependency

Supply chain risk

Contains a dependency which resolves to a GitHub URL. Dependencies fetched from GitHub specifiers are not immutable can be used to inject untrusted code or reduce the likelihood of a reproducible install.

Found 1 instance in 1 package

Fixed alerts

Network access

Supply chain risk

This module accesses the network.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1622049

increased by107.27%

Dev dependency count

36

decreased by-25%

Number of package files

569

increased by14.03%

Lines of code

31619

increased by164.26%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Number of lines in readme file

324

decreased by-0.31%

Number of high supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addedmarkdown-it-imsize@Knowt/markdown-it-imsize

• - Removedreact-medium-image-zoom@^3.1.3

• - Removedcaniuse-lite@1.0.30001612(transitive)

• - Removedreact-medium-image-zoom@3.1.3(transitive)