Move some files to typescript

packages/dante3/src/blocks/extension.js → packages/dante3/src/blocks/extension.ts

@@ -12,33 +12,33 @@ export function extensionFactory(options) {
     atom: options.atom || false,
     addOptions: options.options || {},
     // priority: options.priority || 1, // somehow this option breaks the addKeyboardShortcut
-    onBeforeCreate({ editor }) {
+    onBeforeCreate() {
       // Before the view is created.
-      options.onBeforeCreate && options.onBeforeCreate(editor);
+      options.onBeforeCreate && options.onBeforeCreate(this.editor);
     },
-    onCreate({ editor }) {
+    onCreate() {
       // The editor is ready.
-      options.onCreate && options.onCreate(editor);
+      options.onCreate && options.onCreate(this.editor);
     },
-    onUpdate({ editor }) {
+    onUpdate() {
       // The content has changed.
-      options.onUpdate && options.onUpdate(editor);
+      options.onUpdate && options.onUpdate(this.editor);
     },
-    onSelectionUpdate({ editor }) {
+    onSelectionUpdate() {
       // The selection has changed.
-      options.onSelectionUpdate && options.onSelectionUpdate(editor);
+      options.onSelectionUpdate && options.onSelectionUpdate(this.editor);
     },
-    onTransaction({ editor, transaction }) {
+    onTransaction() {
       // The editor state has changed.
-      options.onTransaction && options.onTransaction(editor);
+      options.onTransaction && options.onTransaction(this.editor);
     },
-    onFocus({ editor, event }) {
+    onFocus() {
       // The editor is focused.
-      options.onFocus && options.onFocus(editor);
+      options.onFocus && options.onFocus(this.editor);
     },
-    onBlur({ editor, event }) {
+    onBlur() {
       // The editor isn’t focused anymore.
-      options.onBlur && options.onBlur(editor);
+      options.onBlur && options.onBlur(this.editor);
     },
     onDestroy() {
       // The editor is being destroyed.

packages/dante3/src/plugins/colorStyle.js → packages/dante3/src/plugins/colorStyle.ts

@@ -1,11 +1,24 @@
 import { Extension } from "@tiptap/core";
 import "@tiptap/extension-text-style";
 
+// Recommended approach for extending commands
+// @see https://tiptap.dev/guide/typescript#command-type
+declare module '@tiptap/core' {
+  interface Commands<ReturnType> {
+    customExtension: {
+      setColor: (color: string) => ReturnType,
+      unsetColor: () => ReturnType
+    }
+  }
+}
+
 export const Color = Extension.create({
   name: "color",
 
-  addOptions: {
-    types: ["textStyle"],
+  addOptions() {
+    return {
+      types: ["textStyle"],
+    }
   },
 
   addGlobalAttributes() {

packages/dante3/src/plugins/tipTapPlaceholder.js → packages/dante3/src/plugins/tipTapPlaceholder.ts

@@ -5,12 +5,14 @@ import { Plugin } from "prosemirror-state";
 export const Placeholder = Extension.create({
   name: "placeholder",
 
-  addOptions: {
-    emptyEditorClass: "is-editor-empty",
-    emptyNodeClass: "is-empty",
-    placeholder: "Write something …",
-    showOnlyWhenEditable: true,
-    showOnlyCurrent: true,
+  addOptions() {
+    return {
+      emptyEditorClass: "is-editor-empty",
+      emptyNodeClass: "is-empty",
+      placeholder: "Write something …",
+      showOnlyWhenEditable: true,
+      showOnlyCurrent: true,
+    }
   },
 
   addProseMirrorPlugins() {

packages/dante3/src/popovers/color.js → packages/dante3/src/popovers/color.tsx

@@ -32,6 +32,7 @@ export default function DanteTooltipColor(props) {
     } else {
       return
     }*/
+    return undefined
   }
 
   function renderColor() {
@@ -48,7 +49,7 @@ export default function DanteTooltipColor(props) {
         >
           <HexColorPicker
             color={v}
-            onChange={(color, e) => {
+            onChange={color => {
               setValue(color);
               //handleChange(e, color);
               //this.handleClick(e,  color )

packages/dante3/src/popovers/menuBar.js → packages/dante3/src/popovers/menuBar.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { CSSProperties } from "react";
 import { AnchorStyle } from "../styled/menu";
 import ImagePopover from "./image";
 import { BubbleMenu } from "./bubble-menu/bubble-menu-react";
@@ -40,8 +40,16 @@ function DanteTooltipLink({ enableLinkMode, selected }) {
   );
 }
 
+interface LinkState {
+  link_mode: boolean
+  url?: string
+  menu_style: {
+    minWidth?: string,
+  }
+}
+
 export default function MenuBar({ editor, fixed }) {
-  const [linkState, setLinkState] = useState({
+  const [linkState, setLinkState] = useState<LinkState>({
     link_mode: false,
     menu_style: {
       minWidth: "200px",
@@ -63,7 +71,7 @@ export default function MenuBar({ editor, fixed }) {
   }
 
   function displayActiveMenu() {
-    if (this.state.show) {
+    if (show) {
       return "dante-menu--active";
     } else {
       return "";
@@ -117,7 +125,7 @@ export default function MenuBar({ editor, fixed }) {
     editor.chain().focus().setColor(style).run();
   }
 
-  function fixedStyles() {
+  function fixedStyles(): CSSProperties {
     if (!fixed) return { width: `${11 * 43}px` };
     if (fixed) return { position: `sticky`, top: "0" };
   }
@@ -128,7 +136,7 @@ export default function MenuBar({ editor, fixed }) {
 
     return (
       <AnchorStyle
-        fixed={fixed}
+        //fixed={fixed}  // This wasn't present in the type for AnchorStyle and didn't appear to be referenced anywhere
         className={`dante-menu ${displayLinkMode()}`}
         style={fixedStyles()}
       >
@@ -171,7 +179,7 @@ export default function MenuBar({ editor, fixed }) {
 
           <DanteTooltipLink
             selected={editor.isActive("link")}
-            editor={editor}
+            //editor={editor}
             enableLinkMode={_enableLinkMode}
           />
           <li

packages/dante3/src/styled/menu.js → packages/dante3/src/styled/menu.ts

@@ -34,7 +34,7 @@ export const AnchorStyle = styled.div`
       height: 0;
       width: 0;
       position: absolute;
-      left: ${(props) => (props.arrowPosition ? props.arrowPosition : "50%")};
+      left: ${(props) => (props['arrowPosition'] ? props['arrowPosition'] : "50%")};
       pointer-events: none;
       border: ${(props) => props.theme.dante_menu_caret_size} solid transparent;
       margin-left: -${(props) => math(`${props.theme.dante_menu_caret_size} / 2`)};

packages/dante3/src/styled/themes/types.ts

@@ -0,0 +1,88 @@
+import '@emotion/react'
+
+// This is the prescribed method for using custom themes with emotion and typescript
+// @see https://emotion.sh/docs/typescript
+declare module '@emotion/react' {
+  export interface Theme {
+    dante_font_family_serif: string
+    dante_font_family_sans: string
+    dante_font_family_mono: string
+    dante_font_family_base: string
+
+    // Editor
+    dante_editor_font_size: string
+    dante_editor_line_height: string
+
+    //dante_font_family_sans_serif: "comic-sans",
+    dante_visual_debugger: string
+    dante_text_color: string
+    dante_inversed_color: string
+    dante_accent_color: string
+    dante_control_color: string
+    dante_popover_color: string
+
+    //dante_font_size_base:  '24px',
+    //line_height_base:     '1.428571429', // 20/14
+
+    tooltip_color: string
+    tooltip_background_color: string
+    tooltip_border_color: string
+    tooltip_color_opacity: string
+    tooltip_color_opacity_hover: string
+    tooltip_background_opacity: string
+    tooltip_border_width: string
+    tooltip_border_radius: string
+
+    tooltip_caret_size: string
+    menu_tone: string
+
+    tooltip_button_spacing: string
+    tooltip_menu_spacing: string
+
+    tooltip_items: number // Fix this and remove it
+    tooltip_item_delay: number
+    tooltip_size: string
+    tooltip_line_height: string
+
+    tooltip_default_transition: string
+    tooltip_forward_transition: string
+    tooltip_backward_transition: string
+
+    dante_code_background: string
+    dante_code_color: string
+
+    // Menu
+
+    //background: #2A2B32;
+
+    dante_menu_height: string
+    dante_menu_background: string
+    dante_menu_color: string
+    dante_menu_border_radius: string
+    dante_menu_box_shadow: string
+    dante_menu_icon_size: string
+    dante_menu_icon_color: string
+    dante_menu_icon_accent: string
+    dante_menu_divider_color: string
+    dante_menu_border_width: string
+    dante_menu_border_color: string
+    dante_menu_caret_size: string
+    dante_bg_color: string
+
+    // highlight theme
+    // highlight theme
+    // find other themes at https://highlightjs.org/static/demo/
+    // https://github.com/highlightjs/highlight.js/tree/main/src/styles
+    hljs_color: string
+    hljs_background: string
+    hljs_emphasis_color: string
+    hljs_literal_color: string
+    hljs_selector_class_color: string
+    hljs_name_color: string
+    hljs_title_color: string
+    hljs_variable_color: string
+    hljs_class_title_color: string
+    hljs_link_color: string
+    hljs_deletion_color: string
+  }
+}