@@ -54,7 +56,9 @@ export function ToolbarSplit(props: Props) {
style={{ color: "inherit" }}
variant={isActive() ? "filled" : "default"}
className={classes.menuControl}
- px={6}
+ w={BUTTON_WIDTH}
+ h={BUTTON_HEIGHT}
+ p={0}
size="xs"
>
diff --git a/packages/renderer/src/components/Views/Editor/extensions/CustomCode.ts b/packages/renderer/src/components/Views/Editor/extensions/CustomCode.ts
new file mode 100644
index 0000000..7adfc3f
--- /dev/null
+++ b/packages/renderer/src/components/Views/Editor/extensions/CustomCode.ts
@@ -0,0 +1,9 @@
+import Code from "@tiptap/extension-code";
+
+export const CustomCode = Code.extend({
+ addKeyboardShortcuts() {
+ return {
+ "Mod-/": () => this.editor.commands.toggleCode()
+ };
+ }
+});
diff --git a/packages/renderer/src/components/Views/Editor/extensions/CustomLink.ts b/packages/renderer/src/components/Views/Editor/extensions/CustomLink.ts
new file mode 100644
index 0000000..0f688dd
--- /dev/null
+++ b/packages/renderer/src/components/Views/Editor/extensions/CustomLink.ts
@@ -0,0 +1,80 @@
+import { getAttributes, mergeAttributes } from "@tiptap/core";
+import Link from "@tiptap/extension-link";
+import { Plugin, PluginKey } from "@tiptap/pm/state";
+
+export const CustomLink = Link.extend({
+ renderHTML({ HTMLAttributes, mark }) {
+ return [
+ "a",
+ mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, {
+ title: mark.attrs.href + " (Ctrl or Cmd-click to open)"
+ }),
+ 0
+ ];
+ },
+
+ addProseMirrorPlugins() {
+ const clickHandler = new Plugin({
+ key: new PluginKey("handleClickLink"),
+ props: {
+ // handleDOMEvents: {
+ // keydown: (view, event) => {
+ // if (event.key == "Control") {
+ // document.querySelectorAll(".ProseMirror a").forEach((value) => {
+ // const el = value as HTMLAnchorElement;
+
+ // el.classList.add("ctrl");
+ // });
+ // }
+ // },
+ // keyup: (view, event) => {
+ // if (event.key == "Control") {
+ // document.querySelectorAll(".ProseMirror a").forEach((value) => {
+ // const el = value as HTMLAnchorElement;
+
+ // el.classList.remove("ctrl");
+ // });
+ // }
+ // }
+ // },
+ handleClick: (view, pos, event) => {
+ if (event.button !== 0) {
+ return false;
+ }
+
+ const eventTarget = event.target as HTMLElement;
+
+ if (eventTarget.nodeName !== "A") {
+ return false;
+ }
+
+ const attrs = getAttributes(view.state, "link");
+ const link = event.target as HTMLLinkElement;
+
+ const href = link?.href ?? attrs.href;
+ // const target = link?.target ?? attrs.target;
+
+ if (link && href) {
+ if (view.editable) {
+ // window.open(href, target);
+ if (event.ctrlKey) {
+ window.api.openExternalLink(href);
+ }
+ }
+
+ return true;
+ }
+
+ return false;
+ }
+ }
+ });
+
+ const oldPlugins = this.parent?.() || [];
+
+ // Remove old click handler plugin, but keep paste handler and autolinking
+ oldPlugins.splice(1, 1);
+
+ return [...oldPlugins, clickHandler];
+ }
+});
diff --git a/packages/renderer/src/components/Views/Editor/extensions/CustomTable.ts b/packages/renderer/src/components/Views/Editor/extensions/CustomTable.ts
new file mode 100644
index 0000000..3da6999
--- /dev/null
+++ b/packages/renderer/src/components/Views/Editor/extensions/CustomTable.ts
@@ -0,0 +1,76 @@
+import Table from "@tiptap/extension-table";
+import { Fragment } from "@tiptap/pm/model";
+import { getHTMLFromFragment } from "@tiptap/core";
+import { Node } from "@tiptap/pm/model";
+
+export const CustomTable = Table.extend({
+ addStorage() {
+ return {
+ markdown: {
+ // Turn code blocks into back-tick markdown expressions instead of HTTML inside table cells
+ // This lets code blocks display correctly inside tables on GitHub
+ serialize(state: any, node: Node, parent: Node) {
+ let html = serializeHTML(node, parent);
+ const regex = /([\S\s]*?)<\/code><\/pre>/gm;
+ let m: RegExpExecArray | null;
+
+ while ((m = regex.exec(html)) !== null) {
+ // This is necessary to avoid infinite loops with zero-width matches
+ if (m.index === regex.lastIndex) {
+ regex.lastIndex++;
+ }
+
+ const lang = m[1];
+ const code = m[2];
+
+ // https://stackoverflow.com/a/53038904/6784197
+ html = html.replace(
+ /([\S\s]*?)<\/code><\/pre>/gm,
+ `\n\n\`\`\`${lang}\n${code}\n\`\`\`\n`
+ );
+ }
+
+ state.write(html);
+ if (node.isBlock) {
+ state.closeBlock(node);
+ }
+ },
+ parse: {
+ // handled by markdown-it
+ }
+ }
+ };
+ }
+});
+
+/**
+ * These functions were copied from
+ * https://github.com/aguingand/tiptap-markdown/blob/main/src/extensions/nodes/html.js
+ */
+
+function serializeHTML(node: Node, parent: Node) {
+ const schema = node.type.schema;
+ const html = getHTMLFromFragment(Fragment.from(node), schema);
+
+ if (node.isBlock && parent.type.name === schema.topNodeType.name) {
+ return formatBlock(html);
+ }
+
+ return html;
+}
+
+function formatBlock(html: string) {
+ const dom = elementFromString(html);
+ const element = dom.firstElementChild;
+
+ element!.innerHTML = element!.innerHTML.trim() ? `\n${element!.innerHTML}\n` : `\n`;
+
+ return element!.outerHTML;
+}
+
+function elementFromString(value: string) {
+ // add a wrapper to preserve leading and trailing whitespace
+ const wrappedValue = `${value}`;
+
+ return new window.DOMParser().parseFromString(wrappedValue, "text/html").body;
+}
diff --git a/packages/renderer/src/components/Views/Editor/extensions/ResizableImage/ResizableImage.ts b/packages/renderer/src/components/Views/Editor/extensions/ResizableImage/ResizableImage.ts
new file mode 100644
index 0000000..e931adf
--- /dev/null
+++ b/packages/renderer/src/components/Views/Editor/extensions/ResizableImage/ResizableImage.ts
@@ -0,0 +1,25 @@
+import Image from "@tiptap/extension-image";
+import { ReactNodeViewRenderer } from "@tiptap/react";
+import { ResizableImageWrapper } from "./ResizableImageWrapper";
+
+export const ResizableImage = Image.extend({
+ addNodeView() {
+ return ReactNodeViewRenderer(ResizableImageWrapper);
+ },
+ addAttributes() {
+ return {
+ ...this.parent?.(),
+ width: {
+ default: "auto",
+ renderHTML: (attributes) => {
+ return {
+ width: attributes.width
+ };
+ }
+ }
+ };
+ },
+ renderHTML() {
+ return ["span"];
+ }
+});
diff --git a/packages/renderer/src/components/Views/Editor/extensions/ResizableImage/ResizableImageWrapper.tsx b/packages/renderer/src/components/Views/Editor/extensions/ResizableImage/ResizableImageWrapper.tsx
new file mode 100644
index 0000000..e8458f5
--- /dev/null
+++ b/packages/renderer/src/components/Views/Editor/extensions/ResizableImage/ResizableImageWrapper.tsx
@@ -0,0 +1,64 @@
+import { NodeViewProps, NodeViewWrapper } from "@tiptap/react";
+import { useRef } from "react";
+
+// Based off of https://github.com/breakerh/tiptap-image-resize/blob/main/src/component/ImageResizeComponent.tsx
+export function ResizableImageWrapper({ node, updateAttributes }: NodeViewProps) {
+ const imageRef = useRef(null);
+
+ const handler = (mouseDownEvent: React.MouseEvent) => {
+ const startPosition = { x: mouseDownEvent.clientX, y: mouseDownEvent.clientY };
+ const startSize = { x: imageRef.current!.clientWidth, y: imageRef.current!.clientHeight };
+
+ const maxWidth = document.getElementById("tiptap-editor")!.offsetWidth;
+
+ function onMouseMove(e: MouseEvent) {
+ let p = Math.ceil(((startSize.x - startPosition.x + e.clientX) / maxWidth) * 100);
+
+ if (p > 100) p = 100;
+ if (p < 3) p = 3;
+
+ updateAttributes({
+ width: p + "%"
+ });
+ }
+ function onMouseUp() {
+ document.body.removeEventListener("mousemove", onMouseMove);
+ }
+
+ document.body.addEventListener("mousemove", onMouseMove);
+ document.body.addEventListener("mouseup", onMouseUp, { once: true });
+ };
+
+ return (
+
+
+
+
+