Typescript All The Things!

packages/dante3/src/App.test.js → packages/dante3/src/App.test.tsx

@@ -1,4 +1,5 @@
 import { render, screen } from "@testing-library/react";
+import React from "react";
 import App from "./App";
 
 test("renders learn react link", () => {

packages/dante3/src/App.js → packages/dante3/src/App.tsx

@@ -1,6 +1,6 @@
-import logo from "./logo.svg";
 import "./App.css";
 import Editor from "./DanteEditor";
+import React from "react";
 
 function App() {
   return (

packages/dante3/src/DanteEditor.js → packages/dante3/src/DanteEditor.tsx

@@ -45,14 +45,14 @@ export default function Editor() {
     return theme === "light" ? defaultTheme : darkTheme;
   }
 
-  function mergeThemeOptions(size) {
+  function mergeThemeOptions(size: string) {
     setThemeOptions({
       ...themeOptions,
       dante_editor_font_size: size || "1rem",
     });
   }
 
-  function toggleTheme(t) {
+  function toggleTheme(t: string) {
     setThemeOptions(t === "light" ? defaultTheme : darkTheme);
   }
 
@@ -76,7 +76,7 @@ export default function Editor() {
 
   return (
     <ThemeProvider theme={themeOptions}>
-      <EditorContainer
+      <EditorContainer theme={themeOptions}
       //style={{width: '600px', margin: '0 auto'}}
       >
         <DanteEditor

packages/dante3/src/blocks/editableSimple.js → packages/dante3/src/blocks/editableSimple.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { NodeViewWrapper, NodeViewContent } from "@tiptap/react";
 
-export default () => {
+const EditableSimple = () => {
   return (
     <NodeViewWrapper
       className="react-component-with-content"
@@ -15,3 +15,5 @@ export default () => {
     </NodeViewWrapper>
   );
 };
+
+export default EditableSimple

packages/dante3/src/blocks/image.js → packages/dante3/src/blocks/image.tsx

@@ -2,8 +2,6 @@ import React from "react";
 import { NodeViewWrapper, NodeViewContent } from "@tiptap/react";
 import axios from "axios";
 import styled from "@emotion/styled";
-import { isEmpty } from "../utils";
-import MediumImage from "./mediumImage";
 import { image } from "../icons";
 
 export const StyleWrapper = styled(NodeViewWrapper)``;

packages/dante3/src/blocks/video.js → packages/dante3/src/blocks/video.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect } from "react";
 //import { EditorBlock } from 'draft-js'
 //import { updateDataOfBlock, addNewBlockAt } from '../../model/index.js'
 import axios from "axios";
@@ -11,8 +11,8 @@ import { isEmpty } from "../utils";
 
 export const StyleWrapper = styled(NodeViewWrapper)``;
 
-export default function VideoBlock(props) {
-  React.useEffect(() => {
+const VideoBlock: React.FC = (props) => {
+  useEffect(() => {
     if (!isEmpty(props.node.attrs.embed_data)) {
       return;
     }
@@ -105,6 +105,8 @@ export default function VideoBlock(props) {
   );
 }
 
+export default VideoBlock
+
 export const VideoBlockConfig = (options = {}) => {
   let config = {
     icon: video,

packages/dante3/src/components/Dialog.tsx

@@ -1,13 +1,19 @@
 import { Dialog, Transition } from "@headlessui/react";
-import { Fragment, useState, useEffect } from "react";
+import React from "react";
+import { Fragment, useEffect } from "react";
 
-export default function MyModal({
+interface MyModalProps {
+  isOpen: boolean,
+  setIsOpen: (open: boolean) => void,
+  title: string,
+}
+
+const MyModal: React.FC<MyModalProps> = ({
   isOpen,
   setIsOpen,
   title,
-  description,
   children,
-}) {
+}) => {
   function closeModal() {
     setIsOpen(false);
   }
@@ -20,7 +26,7 @@ export default function MyModal({
     setTimeout(() => {
       setIsOpen(true);
     }, 200);
-  }, []);
+  }, [setIsOpen]);
 
   return (
     <>
@@ -95,3 +101,5 @@ export default function MyModal({
     </>
   );
 }
+
+export default MyModal

packages/dante3/src/editor/index.tsx

@@ -5,8 +5,12 @@ import {
   EditorContent,
   FloatingMenu,
   ReactNodeViewRenderer,
+  Extension,
+  Mark,
 } from "@tiptap/react";
 
+import { Node as TiptapNode } from "@tiptap/react";
+
 import StarterKit from "@tiptap/starter-kit";
 import Link from "@tiptap/extension-link";
 import TextStyle from "@tiptap/extension-text-style";
@@ -37,7 +41,18 @@ import { lowlight } from "lowlight/lib/common.js";
 //import SaveBehavior from './data/save_content'
 import EditorContainer, { LogWrapper } from "../styled/base";
 
-export default function Editor({
+export interface EditorProps {
+  widgets: any
+  theme: any
+  fixed: any
+  content: any
+  onUpdate: any
+  readOnly: any
+  bodyPlaceholder: any
+  extensions?: Extension[]
+}
+
+const Editor: React.FC<EditorProps> = ({
   widgets,
   theme,
   fixed,
@@ -46,10 +61,9 @@ export default function Editor({
   readOnly,
   bodyPlaceholder,
   extensions,
-}) {
-  function basePlugins() {
+}) => {
+  function basePlugins(): (TiptapNode|Mark|Extension)[] {
     return [
-
       StarterKit.configure({
         heading: {
           levels: [1, 2, 3],
@@ -187,3 +201,5 @@ export default function Editor({
     </ThemeProvider>
   );
 }
+
+export default Editor

packages/dante3/src/index.ts

@@ -40,6 +40,7 @@ import GiphyBlock, { GiphyBlockConfig } from "./blocks/giphy/giphyBlock";
 import SpeechToTextBlock, {
   SpeechToTextBlockConfig,
 } from "./blocks/speechToText";
+import { Extension, Mark, Node } from "@tiptap/core";
 
 //export {DanteEditor}
 export { darkTheme, defaultTheme };

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

@@ -1,11 +1,22 @@
-import { Extension } from "@tiptap/core";
+import { CommandProps, Extension } from "@tiptap/core";
 import "@tiptap/extension-text-style";
 
+declare module '@tiptap/core' {
+  interface Commands<ReturnType> {
+    color: {
+      setColor: (color: string) => ReturnType,
+      unsetColor: () => ReturnType
+    }
+  }
+}
+
 export const Color = Extension.create({
   name: "color",
 
-  addOptions: {
-    types: ["textStyle"],
+  addOptions() {
+    return {
+      types: ["textStyle"],
+    }
   },
 
   addGlobalAttributes() {
@@ -36,13 +47,15 @@ export const Color = Extension.create({
   addCommands() {
     return {
       setColor:
-        (color) =>
-        ({ chain }) => {
-          return chain().setMark("textStyle", { color }).run();
+        () =>
+        ({ chain }: CommandProps) => {
+          return chain()
+            .setMark("textStyle", { color: null })
+            .run();
         },
       unsetColor:
         () =>
-        ({ chain }) => {
+        ({ chain }: CommandProps) => {
           return chain()
             .setMark("textStyle", { color: null })
             .removeEmptyTextStyle()

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

@@ -4,9 +4,9 @@ import { Decoration, DecorationSet } from "prosemirror-view";
 export default new Plugin({
   props: {
     decorations: (state) => {
-      const decorations = [];
+      const decorations: Decoration[] = [];
 
-      const decorate = (node, pos) => {
+      const decorate = (node: typeof state.doc, pos: number) => {
         if (node.type.isBlock && node.childCount === 0) {
           decorations.push(
             Decoration.node(pos, pos + node.nodeSize, {

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

@@ -1,16 +1,26 @@
-import { Extension, isNodeEmpty } from "@tiptap/core";
+import { Editor, Extension, isNodeEmpty } from "@tiptap/core";
 import { Decoration, DecorationSet } from "prosemirror-view";
 import { Plugin } from "prosemirror-state";
 
-export const Placeholder = Extension.create({
+interface PlaceholderOptions{
+  emptyEditorClass: string
+  emptyNodeClass: string
+  placeholder: string | (<Node>(ctx: {node: Node, editor: Editor}) => string)
+  showOnlyWhenEditable: boolean
+  showOnlyCurrent: boolean
+}
+
+export const Placeholder = Extension.create<PlaceholderOptions>({
   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() {
@@ -21,7 +31,7 @@ export const Placeholder = Extension.create({
             const active =
               this.editor.isEditable || !this.options.showOnlyWhenEditable;
             const { anchor } = selection;
-            const decorations = [];
+            const decorations: Decoration[] = [];
 
             if (!active) {
               return;

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

@@ -1,15 +1,21 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, MouseEventHandler } from "react";
 import { HexColorPicker } from "react-colorful";
 import { fontColor } from "../icons.js";
 import useDebounce from "../hooks/useDebounce";
 
-export default function DanteTooltipColor(props) {
+export interface DanteTooltipColorProps {
+  value?: string
+  defaultValue: string
+  handleClick: (value?: string) => void
+}
+
+const DanteTooltipColor: React.FC<DanteTooltipColorProps> = (props) => {
   const [open, setOpen] = useState(false);
   const [value, setValue] = useState(props.value);
 
   const debouncedValue = useDebounce(value, 200);
 
-  function toggle(ev) {
+  const toggle: MouseEventHandler<HTMLSpanElement> = (ev) => {
     // let selection = this.props.editorState.getSelection()
     // prevent unselection of selection
     ev.preventDefault();
@@ -25,17 +31,19 @@ export default function DanteTooltipColor(props) {
     [debouncedValue] // Only call effect if debounced search term changes
   );
 
+  /*
   function currentValue() {
-    /*let selection = this.props.editorState.getSelection()
+    let selection = this.props.editorState.getSelection()
     if (!selection.isCollapsed()) {
       return this.props.styles[this.props.style_type].current(this.props.editorState)
     } else {
       return
-    }*/
+    }
   }
+  */
 
   function renderColor() {
-    const v = currentValue() || props.value || props.defaultValue;
+    const v = /*currentValue() ||*/ props.value || props.defaultValue;
 
     if (open) {
       return (
@@ -48,7 +56,7 @@ export default function DanteTooltipColor(props) {
         >
           <HexColorPicker
             color={v}
-            onChange={(color, e) => {
+            onChange={(color: string) => {
               setValue(color);
               //handleChange(e, color);
               //this.handleClick(e,  color )
@@ -68,3 +76,5 @@ export default function DanteTooltipColor(props) {
     </li>
   );
 }
+
+export default DanteTooltipColor

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

@@ -1,6 +1,4 @@
 import React from "react";
-import axios from "axios";
-import styled from "@emotion/styled";
 import { AnchorStyle } from "../styled/menu";
 
 import { imageFill, imageCenter, imageLeft, imageWide } from "../icons";