From 093368cc022c874844e4cd68ef87450e2e249333 Mon Sep 17 00:00:00 2001 From: Dan <44686976+GithubAccountOfDanielDavis@users.noreply.github.com> Date: Sat, 10 Dec 2022 16:00:53 -0500 Subject: [PATCH 1/6] Make all files .ts or .tsx --- packages/dante3/src/{App.test.js => App.test.ts} | 0 packages/dante3/src/{App.js => App.ts} | 0 packages/dante3/src/{DanteEditor.js => DanteEditor.ts} | 0 packages/dante3/src/blocks/{code.js => code.ts} | 0 packages/dante3/src/blocks/{divider.js => divider.ts} | 0 .../src/blocks/{editableSimple.js => editableSimple.ts} | 0 packages/dante3/src/blocks/{embed.js => embed.ts} | 0 packages/dante3/src/blocks/{extension.js => extension.ts} | 0 packages/dante3/src/blocks/giphy/{giphy.js => giphy.ts} | 0 .../dante3/src/blocks/giphy/{giphyBlock.js => giphyBlock.ts} | 0 packages/dante3/src/blocks/{image.js => image.ts} | 0 packages/dante3/src/blocks/{mediumImage.js => mediumImage.ts} | 0 packages/dante3/src/blocks/{placeholder.js => placeholder.ts} | 0 .../dante3/src/blocks/{speechToText.js => speechToText.ts} | 0 packages/dante3/src/blocks/{video.js => video.ts} | 0 .../videoRecorder/{MediaRecorder.js => MediaRecorder.ts} | 0 .../dante3/src/blocks/videoRecorder/{icon.js => icon.tsx} | 0 .../dante3/src/blocks/videoRecorder/{index.js => index.ts} | 0 .../dante3/src/blocks/videoRecorder/{styled.js => styled.ts} | 0 packages/dante3/src/hooks/{useDebounce.js => useDebounce.ts} | 0 packages/dante3/src/{icons.js => icons.tsx} | 0 packages/dante3/src/plugins/{colorStyle.js => colorStyle.ts} | 0 .../dante3/src/plugins/{placeholder.js => placeholder.ts} | 0 .../plugins/{tipTapPlaceholder.js => tipTapPlaceholder.ts} | 0 packages/dante3/src/popovers/{color.js => color.ts} | 0 packages/dante3/src/popovers/{image.js => image.ts} | 0 packages/dante3/src/popovers/{menuBar.js => menuBar.ts} | 0 packages/dante3/src/styled/{base.js => base.ts} | 0 packages/dante3/src/styled/{menu.js => menu.ts} | 0 packages/dante3/src/styled/themes/{dark.js => dark.ts} | 0 packages/dante3/src/styled/themes/{default.js => default.ts} | 0 packages/dante3/src/styled/themes/{index.js => index.ts} | 0 packages/dante3/src/utils/{index.js => index.ts} | 2 +- packages/dante3/tsconfig.json | 4 ++-- 34 files changed, 3 insertions(+), 3 deletions(-) rename packages/dante3/src/{App.test.js => App.test.ts} (100%) rename packages/dante3/src/{App.js => App.ts} (100%) rename packages/dante3/src/{DanteEditor.js => DanteEditor.ts} (100%) rename packages/dante3/src/blocks/{code.js => code.ts} (100%) rename packages/dante3/src/blocks/{divider.js => divider.ts} (100%) rename packages/dante3/src/blocks/{editableSimple.js => editableSimple.ts} (100%) rename packages/dante3/src/blocks/{embed.js => embed.ts} (100%) rename packages/dante3/src/blocks/{extension.js => extension.ts} (100%) rename packages/dante3/src/blocks/giphy/{giphy.js => giphy.ts} (100%) rename packages/dante3/src/blocks/giphy/{giphyBlock.js => giphyBlock.ts} (100%) rename packages/dante3/src/blocks/{image.js => image.ts} (100%) rename packages/dante3/src/blocks/{mediumImage.js => mediumImage.ts} (100%) rename packages/dante3/src/blocks/{placeholder.js => placeholder.ts} (100%) rename packages/dante3/src/blocks/{speechToText.js => speechToText.ts} (100%) rename packages/dante3/src/blocks/{video.js => video.ts} (100%) rename packages/dante3/src/blocks/videoRecorder/{MediaRecorder.js => MediaRecorder.ts} (100%) rename packages/dante3/src/blocks/videoRecorder/{icon.js => icon.tsx} (100%) rename packages/dante3/src/blocks/videoRecorder/{index.js => index.ts} (100%) rename packages/dante3/src/blocks/videoRecorder/{styled.js => styled.ts} (100%) rename packages/dante3/src/hooks/{useDebounce.js => useDebounce.ts} (100%) rename packages/dante3/src/{icons.js => icons.tsx} (100%) rename packages/dante3/src/plugins/{colorStyle.js => colorStyle.ts} (100%) rename packages/dante3/src/plugins/{placeholder.js => placeholder.ts} (100%) rename packages/dante3/src/plugins/{tipTapPlaceholder.js => tipTapPlaceholder.ts} (100%) rename packages/dante3/src/popovers/{color.js => color.ts} (100%) rename packages/dante3/src/popovers/{image.js => image.ts} (100%) rename packages/dante3/src/popovers/{menuBar.js => menuBar.ts} (100%) rename packages/dante3/src/styled/{base.js => base.ts} (100%) rename packages/dante3/src/styled/{menu.js => menu.ts} (100%) rename packages/dante3/src/styled/themes/{dark.js => dark.ts} (100%) rename packages/dante3/src/styled/themes/{default.js => default.ts} (100%) rename packages/dante3/src/styled/themes/{index.js => index.ts} (100%) rename packages/dante3/src/utils/{index.js => index.ts} (71%) diff --git a/packages/dante3/src/App.test.js b/packages/dante3/src/App.test.ts similarity index 100% rename from packages/dante3/src/App.test.js rename to packages/dante3/src/App.test.ts diff --git a/packages/dante3/src/App.js b/packages/dante3/src/App.ts similarity index 100% rename from packages/dante3/src/App.js rename to packages/dante3/src/App.ts diff --git a/packages/dante3/src/DanteEditor.js b/packages/dante3/src/DanteEditor.ts similarity index 100% rename from packages/dante3/src/DanteEditor.js rename to packages/dante3/src/DanteEditor.ts diff --git a/packages/dante3/src/blocks/code.js b/packages/dante3/src/blocks/code.ts similarity index 100% rename from packages/dante3/src/blocks/code.js rename to packages/dante3/src/blocks/code.ts diff --git a/packages/dante3/src/blocks/divider.js b/packages/dante3/src/blocks/divider.ts similarity index 100% rename from packages/dante3/src/blocks/divider.js rename to packages/dante3/src/blocks/divider.ts diff --git a/packages/dante3/src/blocks/editableSimple.js b/packages/dante3/src/blocks/editableSimple.ts similarity index 100% rename from packages/dante3/src/blocks/editableSimple.js rename to packages/dante3/src/blocks/editableSimple.ts diff --git a/packages/dante3/src/blocks/embed.js b/packages/dante3/src/blocks/embed.ts similarity index 100% rename from packages/dante3/src/blocks/embed.js rename to packages/dante3/src/blocks/embed.ts diff --git a/packages/dante3/src/blocks/extension.js b/packages/dante3/src/blocks/extension.ts similarity index 100% rename from packages/dante3/src/blocks/extension.js rename to packages/dante3/src/blocks/extension.ts diff --git a/packages/dante3/src/blocks/giphy/giphy.js b/packages/dante3/src/blocks/giphy/giphy.ts similarity index 100% rename from packages/dante3/src/blocks/giphy/giphy.js rename to packages/dante3/src/blocks/giphy/giphy.ts diff --git a/packages/dante3/src/blocks/giphy/giphyBlock.js b/packages/dante3/src/blocks/giphy/giphyBlock.ts similarity index 100% rename from packages/dante3/src/blocks/giphy/giphyBlock.js rename to packages/dante3/src/blocks/giphy/giphyBlock.ts diff --git a/packages/dante3/src/blocks/image.js b/packages/dante3/src/blocks/image.ts similarity index 100% rename from packages/dante3/src/blocks/image.js rename to packages/dante3/src/blocks/image.ts diff --git a/packages/dante3/src/blocks/mediumImage.js b/packages/dante3/src/blocks/mediumImage.ts similarity index 100% rename from packages/dante3/src/blocks/mediumImage.js rename to packages/dante3/src/blocks/mediumImage.ts diff --git a/packages/dante3/src/blocks/placeholder.js b/packages/dante3/src/blocks/placeholder.ts similarity index 100% rename from packages/dante3/src/blocks/placeholder.js rename to packages/dante3/src/blocks/placeholder.ts diff --git a/packages/dante3/src/blocks/speechToText.js b/packages/dante3/src/blocks/speechToText.ts similarity index 100% rename from packages/dante3/src/blocks/speechToText.js rename to packages/dante3/src/blocks/speechToText.ts diff --git a/packages/dante3/src/blocks/video.js b/packages/dante3/src/blocks/video.ts similarity index 100% rename from packages/dante3/src/blocks/video.js rename to packages/dante3/src/blocks/video.ts diff --git a/packages/dante3/src/blocks/videoRecorder/MediaRecorder.js b/packages/dante3/src/blocks/videoRecorder/MediaRecorder.ts similarity index 100% rename from packages/dante3/src/blocks/videoRecorder/MediaRecorder.js rename to packages/dante3/src/blocks/videoRecorder/MediaRecorder.ts diff --git a/packages/dante3/src/blocks/videoRecorder/icon.js b/packages/dante3/src/blocks/videoRecorder/icon.tsx similarity index 100% rename from packages/dante3/src/blocks/videoRecorder/icon.js rename to packages/dante3/src/blocks/videoRecorder/icon.tsx diff --git a/packages/dante3/src/blocks/videoRecorder/index.js b/packages/dante3/src/blocks/videoRecorder/index.ts similarity index 100% rename from packages/dante3/src/blocks/videoRecorder/index.js rename to packages/dante3/src/blocks/videoRecorder/index.ts diff --git a/packages/dante3/src/blocks/videoRecorder/styled.js b/packages/dante3/src/blocks/videoRecorder/styled.ts similarity index 100% rename from packages/dante3/src/blocks/videoRecorder/styled.js rename to packages/dante3/src/blocks/videoRecorder/styled.ts diff --git a/packages/dante3/src/hooks/useDebounce.js b/packages/dante3/src/hooks/useDebounce.ts similarity index 100% rename from packages/dante3/src/hooks/useDebounce.js rename to packages/dante3/src/hooks/useDebounce.ts diff --git a/packages/dante3/src/icons.js b/packages/dante3/src/icons.tsx similarity index 100% rename from packages/dante3/src/icons.js rename to packages/dante3/src/icons.tsx diff --git a/packages/dante3/src/plugins/colorStyle.js b/packages/dante3/src/plugins/colorStyle.ts similarity index 100% rename from packages/dante3/src/plugins/colorStyle.js rename to packages/dante3/src/plugins/colorStyle.ts diff --git a/packages/dante3/src/plugins/placeholder.js b/packages/dante3/src/plugins/placeholder.ts similarity index 100% rename from packages/dante3/src/plugins/placeholder.js rename to packages/dante3/src/plugins/placeholder.ts diff --git a/packages/dante3/src/plugins/tipTapPlaceholder.js b/packages/dante3/src/plugins/tipTapPlaceholder.ts similarity index 100% rename from packages/dante3/src/plugins/tipTapPlaceholder.js rename to packages/dante3/src/plugins/tipTapPlaceholder.ts diff --git a/packages/dante3/src/popovers/color.js b/packages/dante3/src/popovers/color.ts similarity index 100% rename from packages/dante3/src/popovers/color.js rename to packages/dante3/src/popovers/color.ts diff --git a/packages/dante3/src/popovers/image.js b/packages/dante3/src/popovers/image.ts similarity index 100% rename from packages/dante3/src/popovers/image.js rename to packages/dante3/src/popovers/image.ts diff --git a/packages/dante3/src/popovers/menuBar.js b/packages/dante3/src/popovers/menuBar.ts similarity index 100% rename from packages/dante3/src/popovers/menuBar.js rename to packages/dante3/src/popovers/menuBar.ts diff --git a/packages/dante3/src/styled/base.js b/packages/dante3/src/styled/base.ts similarity index 100% rename from packages/dante3/src/styled/base.js rename to packages/dante3/src/styled/base.ts diff --git a/packages/dante3/src/styled/menu.js b/packages/dante3/src/styled/menu.ts similarity index 100% rename from packages/dante3/src/styled/menu.js rename to packages/dante3/src/styled/menu.ts diff --git a/packages/dante3/src/styled/themes/dark.js b/packages/dante3/src/styled/themes/dark.ts similarity index 100% rename from packages/dante3/src/styled/themes/dark.js rename to packages/dante3/src/styled/themes/dark.ts diff --git a/packages/dante3/src/styled/themes/default.js b/packages/dante3/src/styled/themes/default.ts similarity index 100% rename from packages/dante3/src/styled/themes/default.js rename to packages/dante3/src/styled/themes/default.ts diff --git a/packages/dante3/src/styled/themes/index.js b/packages/dante3/src/styled/themes/index.ts similarity index 100% rename from packages/dante3/src/styled/themes/index.js rename to packages/dante3/src/styled/themes/index.ts diff --git a/packages/dante3/src/utils/index.js b/packages/dante3/src/utils/index.ts similarity index 71% rename from packages/dante3/src/utils/index.js rename to packages/dante3/src/utils/index.ts index be519a14..5c9e896a 100644 --- a/packages/dante3/src/utils/index.js +++ b/packages/dante3/src/utils/index.ts @@ -1,4 +1,4 @@ -export function isEmpty(obj) { +export function isEmpty(obj: unknown): obj is {} { return ( obj && // 👈 null and undefined check Object.keys(obj).length === 0 && diff --git a/packages/dante3/tsconfig.json b/packages/dante3/tsconfig.json index 1035ab7a..710a24fc 100644 --- a/packages/dante3/tsconfig.json +++ b/packages/dante3/tsconfig.json @@ -5,12 +5,12 @@ "declaration": true, "declarationDir": "build/types", "esModuleInterop": true, - "strictNullChecks": false, + "strictNullChecks": true, "outDir": "./build", "jsx": "react", "lib": ["es6", "dom", "es2016", "es2017"], "module": "es2020", - "noImplicitAny": false, + "noImplicitAny": true, "moduleResolution": "node", "noEmit": true, "resolveJsonModule": true, From 1cbc1691d359e905c01cbd60bb36dbf544f09508 Mon Sep 17 00:00:00 2001 From: Dan <44686976+GithubAccountOfDanielDavis@users.noreply.github.com> Date: Sat, 10 Dec 2022 17:00:33 -0500 Subject: [PATCH 2/6] Move various files to tsx and type the theming system --- .../dante3/src/{App.test.ts => App.test.tsx} | 0 packages/dante3/src/{App.ts => App.tsx} | 2 +- .../src/{DanteEditor.ts => DanteEditor.tsx} | 0 packages/dante3/src/components/Dialog.tsx | 18 ++-- .../src/popovers/{color.ts => color.tsx} | 0 .../src/popovers/{image.ts => image.tsx} | 0 .../src/popovers/{menuBar.ts => menuBar.tsx} | 0 packages/dante3/src/styled/base.ts | 5 +- packages/dante3/src/styled/index.tsx | 7 +- packages/dante3/src/styled/themes/dark.ts | 7 +- packages/dante3/src/styled/themes/default.ts | 7 +- packages/dante3/src/styled/themes/index.ts | 3 +- packages/dante3/src/styled/themes/theme.ts | 82 +++++++++++++++++++ 13 files changed, 117 insertions(+), 14 deletions(-) rename packages/dante3/src/{App.test.ts => App.test.tsx} (100%) rename packages/dante3/src/{App.ts => App.tsx} (84%) rename packages/dante3/src/{DanteEditor.ts => DanteEditor.tsx} (100%) rename packages/dante3/src/popovers/{color.ts => color.tsx} (100%) rename packages/dante3/src/popovers/{image.ts => image.tsx} (100%) rename packages/dante3/src/popovers/{menuBar.ts => menuBar.tsx} (100%) create mode 100644 packages/dante3/src/styled/themes/theme.ts diff --git a/packages/dante3/src/App.test.ts b/packages/dante3/src/App.test.tsx similarity index 100% rename from packages/dante3/src/App.test.ts rename to packages/dante3/src/App.test.tsx diff --git a/packages/dante3/src/App.ts b/packages/dante3/src/App.tsx similarity index 84% rename from packages/dante3/src/App.ts rename to packages/dante3/src/App.tsx index 71972a72..5821a7b9 100644 --- a/packages/dante3/src/App.ts +++ b/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 ( diff --git a/packages/dante3/src/DanteEditor.ts b/packages/dante3/src/DanteEditor.tsx similarity index 100% rename from packages/dante3/src/DanteEditor.ts rename to packages/dante3/src/DanteEditor.tsx diff --git a/packages/dante3/src/components/Dialog.tsx b/packages/dante3/src/components/Dialog.tsx index eb03db01..ef4d6530 100644 --- a/packages/dante3/src/components/Dialog.tsx +++ b/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 = ({ 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 \ No newline at end of file diff --git a/packages/dante3/src/popovers/color.ts b/packages/dante3/src/popovers/color.tsx similarity index 100% rename from packages/dante3/src/popovers/color.ts rename to packages/dante3/src/popovers/color.tsx diff --git a/packages/dante3/src/popovers/image.ts b/packages/dante3/src/popovers/image.tsx similarity index 100% rename from packages/dante3/src/popovers/image.ts rename to packages/dante3/src/popovers/image.tsx diff --git a/packages/dante3/src/popovers/menuBar.ts b/packages/dante3/src/popovers/menuBar.tsx similarity index 100% rename from packages/dante3/src/popovers/menuBar.ts rename to packages/dante3/src/popovers/menuBar.tsx diff --git a/packages/dante3/src/styled/base.ts b/packages/dante3/src/styled/base.ts index f2ea6b92..45fb3ebc 100644 --- a/packages/dante3/src/styled/base.ts +++ b/packages/dante3/src/styled/base.ts @@ -1,7 +1,8 @@ import styled from "@emotion/styled"; import { math, lighten, opacify } from "polished"; +import { DanteTheme } from "./themes"; -const EditorContainer = styled.div` +const EditorContainer = styled.div<{ theme: DanteTheme }>` //@import url("//fonts.googleapis.com/css?family=Merriweather:400,700,400italic,700italic|Open+Sans:400,300,700,800"); //@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,600;1,800&display=swap'); @@ -714,7 +715,7 @@ const EditorContainer = styled.div` } `; -export const InlinetooltipWrapper = styled.div` +export const InlinetooltipWrapper = styled.div<{ theme: DanteTheme }>` // BASE position: absolute; z-index: 10; diff --git a/packages/dante3/src/styled/index.tsx b/packages/dante3/src/styled/index.tsx index 6553f022..816811dd 100644 --- a/packages/dante3/src/styled/index.tsx +++ b/packages/dante3/src/styled/index.tsx @@ -1,7 +1,10 @@ import EditorContainer from "./base"; //import DraftBaseStyles from './draft-styled' import { AnchorStyle } from "./menu"; -export default { + +const moduleExport = { EditorContainer, AnchorStyle, -}; +} + +export default moduleExport; diff --git a/packages/dante3/src/styled/themes/dark.ts b/packages/dante3/src/styled/themes/dark.ts index ac9064ee..4e871a50 100644 --- a/packages/dante3/src/styled/themes/dark.ts +++ b/packages/dante3/src/styled/themes/dark.ts @@ -1,3 +1,5 @@ +import { DanteTheme } from "./theme"; + const dante_font_family_sans = "ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji"; const dante_font_family_sans_serif = @@ -13,7 +15,7 @@ const dante_inversed_color = "#000"; const dante_accent_color = "#5BD974"; const dante_text_color = "#fefefe"; -const theme = { +const theme: DanteTheme = { dante_font_family_serif: dante_font_family_sans_serif, dante_font_family_sans: dante_font_family_sans, dante_font_family_mono: `Menlo, Monaco, Consolas, "Courier New", "Courier", monospace;`, @@ -36,6 +38,8 @@ const theme = { tooltip_color: "#fff", tooltip_background_color: "#000", tooltip_border_color: "#fff", + tooltip_color_opacity: "0.44", + tooltip_color_opacity_hover: "0.9", tooltip_background_opacity: "0", tooltip_border_width: "1px", tooltip_border_radius: "999em", @@ -92,4 +96,5 @@ const theme = { hljs_link_color: "#ff55ff", hljs_deletion_color: "#55ffff", }; + export default theme; diff --git a/packages/dante3/src/styled/themes/default.ts b/packages/dante3/src/styled/themes/default.ts index 19bf9518..3073d5bc 100644 --- a/packages/dante3/src/styled/themes/default.ts +++ b/packages/dante3/src/styled/themes/default.ts @@ -1,3 +1,5 @@ +import { DanteTheme } from "./theme"; + const dante_font_family_sans = "ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji"; const dante_font_family_sans_serif = @@ -13,7 +15,7 @@ const dante_inversed_color = "#FFFFFF"; const dante_accent_color = "#5BD974"; const dante_text_color = "#4a4a4a"; -const theme = { +const theme: DanteTheme = { dante_font_family_serif: dante_font_family_sans_serif, dante_font_family_sans: dante_font_family_sans, dante_font_family_mono: `Menlo, Monaco, Consolas, "Courier New", "Courier", monospace;`, @@ -23,7 +25,7 @@ const theme = { dante_editor_font_size: "1.4rem", dante_editor_line_height: "1.9", - //dante_font_family_sans_serif: "comic-sans", + dante_font_family_sans_serif: "comic-sans", dante_visual_debugger: "false", dante_text_color: dante_text_color, dante_inversed_color: dante_inversed_color, @@ -95,4 +97,5 @@ const theme = { hljs_link_color: "#ff55ff", hljs_deletion_color: "#55ffff", }; + export default theme; diff --git a/packages/dante3/src/styled/themes/index.ts b/packages/dante3/src/styled/themes/index.ts index b8cb59c4..0afc0396 100644 --- a/packages/dante3/src/styled/themes/index.ts +++ b/packages/dante3/src/styled/themes/index.ts @@ -1,4 +1,5 @@ import darkTheme from "./dark"; import defaultTheme from "./default"; +import { DanteTheme } from "./theme"; -export { darkTheme, defaultTheme }; +export { darkTheme, defaultTheme, DanteTheme }; diff --git a/packages/dante3/src/styled/themes/theme.ts b/packages/dante3/src/styled/themes/theme.ts new file mode 100644 index 00000000..307a0fb9 --- /dev/null +++ b/packages/dante3/src/styled/themes/theme.ts @@ -0,0 +1,82 @@ +/** @TODO: These could be validated with typescript's string literal types. Sounds like a project for another day. */ +export interface DanteTheme { + 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: string + 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: string + //line_height_base: string + + tooltip_color: string + tooltip_background_color: string + tooltip_border_color: string + tooltip_color_opacity: string + tooltip_background_opacity: string + tooltip_color_opacity_hover: 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: string + + 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 +} \ No newline at end of file From c747ab34ee989ded1d62624dcf58704d3adb7584 Mon Sep 17 00:00:00 2001 From: Dan <44686976+GithubAccountOfDanielDavis@users.noreply.github.com> Date: Sat, 10 Dec 2022 18:12:12 -0500 Subject: [PATCH 3/6] Moved more to tsx, made some tweaks to types --- packages/dante3/src/App.test.tsx | 1 + packages/dante3/src/DanteEditor.tsx | 6 ++--- .../dante3/src/blocks/{code.ts => code.tsx} | 0 .../src/blocks/{divider.ts => divider.tsx} | 0 .../{editableSimple.ts => editableSimple.tsx} | 4 +++- .../dante3/src/blocks/{embed.ts => embed.tsx} | 0 .../src/blocks/giphy/{giphy.ts => giphy.tsx} | 0 .../giphy/{giphyBlock.ts => giphyBlock.tsx} | 0 .../dante3/src/blocks/{image.ts => image.tsx} | 2 -- .../{mediumImage.ts => mediumImage.tsx} | 0 .../{speechToText.ts => speechToText.tsx} | 0 .../dante3/src/blocks/{video.ts => video.tsx} | 8 ++++--- .../videoRecorder/{index.ts => index.tsx} | 0 packages/dante3/src/editor/index.tsx | 24 +++++++++++++++---- packages/dante3/src/index.ts | 1 + packages/dante3/src/styled/themes/theme.ts | 8 +++++-- 16 files changed, 39 insertions(+), 15 deletions(-) rename packages/dante3/src/blocks/{code.ts => code.tsx} (100%) rename packages/dante3/src/blocks/{divider.ts => divider.tsx} (100%) rename packages/dante3/src/blocks/{editableSimple.ts => editableSimple.tsx} (86%) rename packages/dante3/src/blocks/{embed.ts => embed.tsx} (100%) rename packages/dante3/src/blocks/giphy/{giphy.ts => giphy.tsx} (100%) rename packages/dante3/src/blocks/giphy/{giphyBlock.ts => giphyBlock.tsx} (100%) rename packages/dante3/src/blocks/{image.ts => image.tsx} (99%) rename packages/dante3/src/blocks/{mediumImage.ts => mediumImage.tsx} (100%) rename packages/dante3/src/blocks/{speechToText.ts => speechToText.tsx} (100%) rename packages/dante3/src/blocks/{video.ts => video.tsx} (97%) rename packages/dante3/src/blocks/videoRecorder/{index.ts => index.tsx} (100%) diff --git a/packages/dante3/src/App.test.tsx b/packages/dante3/src/App.test.tsx index 9382b9ad..e2614ce5 100644 --- a/packages/dante3/src/App.test.tsx +++ b/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", () => { diff --git a/packages/dante3/src/DanteEditor.tsx b/packages/dante3/src/DanteEditor.tsx index 3777d222..2e71b433 100644 --- a/packages/dante3/src/DanteEditor.tsx +++ b/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 ( - { +const EditableSimple = () => { return ( { ); }; + +export default EditableSimple diff --git a/packages/dante3/src/blocks/embed.ts b/packages/dante3/src/blocks/embed.tsx similarity index 100% rename from packages/dante3/src/blocks/embed.ts rename to packages/dante3/src/blocks/embed.tsx diff --git a/packages/dante3/src/blocks/giphy/giphy.ts b/packages/dante3/src/blocks/giphy/giphy.tsx similarity index 100% rename from packages/dante3/src/blocks/giphy/giphy.ts rename to packages/dante3/src/blocks/giphy/giphy.tsx diff --git a/packages/dante3/src/blocks/giphy/giphyBlock.ts b/packages/dante3/src/blocks/giphy/giphyBlock.tsx similarity index 100% rename from packages/dante3/src/blocks/giphy/giphyBlock.ts rename to packages/dante3/src/blocks/giphy/giphyBlock.tsx diff --git a/packages/dante3/src/blocks/image.ts b/packages/dante3/src/blocks/image.tsx similarity index 99% rename from packages/dante3/src/blocks/image.ts rename to packages/dante3/src/blocks/image.tsx index ee278b3a..03f78727 100644 --- a/packages/dante3/src/blocks/image.ts +++ b/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)``; diff --git a/packages/dante3/src/blocks/mediumImage.ts b/packages/dante3/src/blocks/mediumImage.tsx similarity index 100% rename from packages/dante3/src/blocks/mediumImage.ts rename to packages/dante3/src/blocks/mediumImage.tsx diff --git a/packages/dante3/src/blocks/speechToText.ts b/packages/dante3/src/blocks/speechToText.tsx similarity index 100% rename from packages/dante3/src/blocks/speechToText.ts rename to packages/dante3/src/blocks/speechToText.tsx diff --git a/packages/dante3/src/blocks/video.ts b/packages/dante3/src/blocks/video.tsx similarity index 97% rename from packages/dante3/src/blocks/video.ts rename to packages/dante3/src/blocks/video.tsx index 5767a98d..07bf5522 100644 --- a/packages/dante3/src/blocks/video.ts +++ b/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, diff --git a/packages/dante3/src/blocks/videoRecorder/index.ts b/packages/dante3/src/blocks/videoRecorder/index.tsx similarity index 100% rename from packages/dante3/src/blocks/videoRecorder/index.ts rename to packages/dante3/src/blocks/videoRecorder/index.tsx diff --git a/packages/dante3/src/editor/index.tsx b/packages/dante3/src/editor/index.tsx index 19743d3e..c7504290 100644 --- a/packages/dante3/src/editor/index.tsx +++ b/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 = ({ 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({ ); } + +export default Editor \ No newline at end of file diff --git a/packages/dante3/src/index.ts b/packages/dante3/src/index.ts index c003c3be..2f2a23f4 100644 --- a/packages/dante3/src/index.ts +++ b/packages/dante3/src/index.ts @@ -40,6 +40,7 @@ import GiphyBlock, { GiphyBlockConfig } from "./blocks/giphy/giphyBlock"; import SpeechToTextBlock, { SpeechToTextBlockConfig, } from "./blocks/speechToText"; +import { Node } from "@tiptap/core"; //export {DanteEditor} export { darkTheme, defaultTheme }; diff --git a/packages/dante3/src/styled/themes/theme.ts b/packages/dante3/src/styled/themes/theme.ts index 307a0fb9..4a89dc41 100644 --- a/packages/dante3/src/styled/themes/theme.ts +++ b/packages/dante3/src/styled/themes/theme.ts @@ -1,5 +1,7 @@ +import { Theme, useTheme } from "@emotion/react" + /** @TODO: These could be validated with typescript's string literal types. Sounds like a project for another day. */ -export interface DanteTheme { +export interface DanteTheme extends Theme { dante_font_family_serif: string dante_font_family_sans: string dante_font_family_mono: string @@ -79,4 +81,6 @@ export interface DanteTheme { hljs_class_title_color: string hljs_link_color: string hljs_deletion_color: string -} \ No newline at end of file +} + +export const useDanteTheme = () => useTheme() as DanteTheme From cd49a175de8ecf8806dcae8f302c8634d04cac1c Mon Sep 17 00:00:00 2001 From: Dan <44686976+GithubAccountOfDanielDavis@users.noreply.github.com> Date: Sun, 11 Dec 2022 14:15:58 -0500 Subject: [PATCH 4/6] Fixed styling types --- packages/dante3/src/styled/base.ts | 5 +- packages/dante3/src/styled/menu.ts | 2 +- packages/dante3/src/styled/themes/dark.ts | 4 +- packages/dante3/src/styled/themes/default.ts | 4 +- packages/dante3/src/styled/themes/index.ts | 3 +- packages/dante3/src/styled/themes/theme.ts | 168 +++++++++---------- 6 files changed, 92 insertions(+), 94 deletions(-) diff --git a/packages/dante3/src/styled/base.ts b/packages/dante3/src/styled/base.ts index 45fb3ebc..f2ea6b92 100644 --- a/packages/dante3/src/styled/base.ts +++ b/packages/dante3/src/styled/base.ts @@ -1,8 +1,7 @@ import styled from "@emotion/styled"; import { math, lighten, opacify } from "polished"; -import { DanteTheme } from "./themes"; -const EditorContainer = styled.div<{ theme: DanteTheme }>` +const EditorContainer = styled.div` //@import url("//fonts.googleapis.com/css?family=Merriweather:400,700,400italic,700italic|Open+Sans:400,300,700,800"); //@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,600;1,800&display=swap'); @@ -715,7 +714,7 @@ const EditorContainer = styled.div<{ theme: DanteTheme }>` } `; -export const InlinetooltipWrapper = styled.div<{ theme: DanteTheme }>` +export const InlinetooltipWrapper = styled.div` // BASE position: absolute; z-index: 10; diff --git a/packages/dante3/src/styled/menu.ts b/packages/dante3/src/styled/menu.ts index c249b398..04ab0d00 100644 --- a/packages/dante3/src/styled/menu.ts +++ b/packages/dante3/src/styled/menu.ts @@ -1,7 +1,7 @@ import styled from "@emotion/styled"; import { math } from "polished"; -export const AnchorStyle = styled.div` +export const AnchorStyle = styled.div<{ arrowPosition?: boolean }>` // MENU //position: absolute; //visibility: hidden; diff --git a/packages/dante3/src/styled/themes/dark.ts b/packages/dante3/src/styled/themes/dark.ts index 4e871a50..2cc788ee 100644 --- a/packages/dante3/src/styled/themes/dark.ts +++ b/packages/dante3/src/styled/themes/dark.ts @@ -1,4 +1,4 @@ -import { DanteTheme } from "./theme"; +import { Theme } from "@emotion/react"; const dante_font_family_sans = "ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji"; @@ -15,7 +15,7 @@ const dante_inversed_color = "#000"; const dante_accent_color = "#5BD974"; const dante_text_color = "#fefefe"; -const theme: DanteTheme = { +const theme: Theme = { dante_font_family_serif: dante_font_family_sans_serif, dante_font_family_sans: dante_font_family_sans, dante_font_family_mono: `Menlo, Monaco, Consolas, "Courier New", "Courier", monospace;`, diff --git a/packages/dante3/src/styled/themes/default.ts b/packages/dante3/src/styled/themes/default.ts index 3073d5bc..67c6689f 100644 --- a/packages/dante3/src/styled/themes/default.ts +++ b/packages/dante3/src/styled/themes/default.ts @@ -1,4 +1,4 @@ -import { DanteTheme } from "./theme"; +import { Theme } from "@emotion/react"; const dante_font_family_sans = "ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji"; @@ -15,7 +15,7 @@ const dante_inversed_color = "#FFFFFF"; const dante_accent_color = "#5BD974"; const dante_text_color = "#4a4a4a"; -const theme: DanteTheme = { +const theme: Theme = { dante_font_family_serif: dante_font_family_sans_serif, dante_font_family_sans: dante_font_family_sans, dante_font_family_mono: `Menlo, Monaco, Consolas, "Courier New", "Courier", monospace;`, diff --git a/packages/dante3/src/styled/themes/index.ts b/packages/dante3/src/styled/themes/index.ts index 0afc0396..b8cb59c4 100644 --- a/packages/dante3/src/styled/themes/index.ts +++ b/packages/dante3/src/styled/themes/index.ts @@ -1,5 +1,4 @@ import darkTheme from "./dark"; import defaultTheme from "./default"; -import { DanteTheme } from "./theme"; -export { darkTheme, defaultTheme, DanteTheme }; +export { darkTheme, defaultTheme }; diff --git a/packages/dante3/src/styled/themes/theme.ts b/packages/dante3/src/styled/themes/theme.ts index 4a89dc41..40ea139c 100644 --- a/packages/dante3/src/styled/themes/theme.ts +++ b/packages/dante3/src/styled/themes/theme.ts @@ -1,86 +1,86 @@ -import { Theme, useTheme } from "@emotion/react" +import '@emotion/react' /** @TODO: These could be validated with typescript's string literal types. Sounds like a project for another day. */ -export interface DanteTheme extends 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: string - 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: string - //line_height_base: string - - tooltip_color: string - tooltip_background_color: string - tooltip_border_color: string - tooltip_color_opacity: string - tooltip_background_opacity: string - tooltip_color_opacity_hover: 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: string - - 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 -} - -export const useDanteTheme = () => useTheme() as DanteTheme +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: string + 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: string + //line_height_base: string + + tooltip_color: string + tooltip_background_color: string + tooltip_border_color: string + tooltip_color_opacity: string + tooltip_background_opacity: string + tooltip_color_opacity_hover: 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: string + + 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 + } +} \ No newline at end of file From fc2f14ed2958f4b508406880a283f7ab7a397ee9 Mon Sep 17 00:00:00 2001 From: Dan <44686976+GithubAccountOfDanielDavis@users.noreply.github.com> Date: Sun, 11 Dec 2022 14:16:16 -0500 Subject: [PATCH 5/6] Added types to plugins and popovers --- packages/dante3/src/index.ts | 2 +- packages/dante3/src/plugins/colorStyle.ts | 27 ++++++++++++----- packages/dante3/src/plugins/placeholder.ts | 4 +-- .../dante3/src/plugins/tipTapPlaceholder.ts | 28 ++++++++++++------ packages/dante3/src/popovers/color.tsx | 4 +-- packages/dante3/src/popovers/image.tsx | 2 -- packages/dante3/src/popovers/menuBar.tsx | 29 +++++++++++++++---- 7 files changed, 67 insertions(+), 29 deletions(-) diff --git a/packages/dante3/src/index.ts b/packages/dante3/src/index.ts index 2f2a23f4..d1fecee8 100644 --- a/packages/dante3/src/index.ts +++ b/packages/dante3/src/index.ts @@ -40,7 +40,7 @@ import GiphyBlock, { GiphyBlockConfig } from "./blocks/giphy/giphyBlock"; import SpeechToTextBlock, { SpeechToTextBlockConfig, } from "./blocks/speechToText"; -import { Node } from "@tiptap/core"; +import { Extension, Mark, Node } from "@tiptap/core"; //export {DanteEditor} export { darkTheme, defaultTheme }; diff --git a/packages/dante3/src/plugins/colorStyle.ts b/packages/dante3/src/plugins/colorStyle.ts index 25ad6c03..34d48759 100644 --- a/packages/dante3/src/plugins/colorStyle.ts +++ b/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 { + 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() diff --git a/packages/dante3/src/plugins/placeholder.ts b/packages/dante3/src/plugins/placeholder.ts index 12a25e05..a9141e0f 100644 --- a/packages/dante3/src/plugins/placeholder.ts +++ b/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, { diff --git a/packages/dante3/src/plugins/tipTapPlaceholder.ts b/packages/dante3/src/plugins/tipTapPlaceholder.ts index 9cfb7a21..83db3c0f 100644 --- a/packages/dante3/src/plugins/tipTapPlaceholder.ts +++ b/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 | ((ctx: {node: Node, editor: Editor}) => string) + showOnlyWhenEditable: boolean + showOnlyCurrent: boolean +} + +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() { @@ -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; diff --git a/packages/dante3/src/popovers/color.tsx b/packages/dante3/src/popovers/color.tsx index 661145ad..def8af41 100644 --- a/packages/dante3/src/popovers/color.tsx +++ b/packages/dante3/src/popovers/color.tsx @@ -35,7 +35,7 @@ export default function DanteTooltipColor(props) { } function renderColor() { - const v = currentValue() || props.value || props.defaultValue; + const v = /*currentValue() ||*/ props.value || props.defaultValue; if (open) { return ( @@ -48,7 +48,7 @@ export default function DanteTooltipColor(props) { > { + onChange={(color: string) => { setValue(color); //handleChange(e, color); //this.handleClick(e, color ) diff --git a/packages/dante3/src/popovers/image.tsx b/packages/dante3/src/popovers/image.tsx index f545be27..dec18914 100644 --- a/packages/dante3/src/popovers/image.tsx +++ b/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"; diff --git a/packages/dante3/src/popovers/menuBar.tsx b/packages/dante3/src/popovers/menuBar.tsx index 794da442..450e7245 100644 --- a/packages/dante3/src/popovers/menuBar.tsx +++ b/packages/dante3/src/popovers/menuBar.tsx @@ -40,8 +40,21 @@ function DanteTooltipLink({ enableLinkMode, selected }) { ); } -export default function MenuBar({ editor, fixed }) { - const [linkState, setLinkState] = useState({ +interface MenuBarProps { + editor: any + fixed: boolean +} + +interface LinkState { + link_mode: boolean + menu_style: { + minWidth?: string + } + url?: string +} + +const MenuBar: React.FC = ({ editor, fixed }) => { + const [linkState, setLinkState] = useState({ link_mode: false, menu_style: { minWidth: "200px", @@ -62,6 +75,7 @@ export default function MenuBar({ editor, fixed }) { } } + /* function displayActiveMenu() { if (this.state.show) { return "dante-menu--active"; @@ -69,6 +83,7 @@ export default function MenuBar({ editor, fixed }) { return ""; } } + */ function itemClass(kind, opts = null) { if (!opts) @@ -118,8 +133,8 @@ export default function MenuBar({ editor, fixed }) { } function fixedStyles() { - if (!fixed) return { width: `${11 * 43}px` }; - if (fixed) return { position: `sticky`, top: "0" }; + if (!fixed) return { width: `${11 * 43}px` } as const; + if (fixed) return { position: `sticky`, top: "0" } as const; } function renderMenu() { @@ -128,7 +143,7 @@ export default function MenuBar({ editor, fixed }) { return ( @@ -171,7 +186,7 @@ export default function MenuBar({ editor, fixed }) {
  • ); } + +export default MenuBar From 9ede2bb34f6d173cbafdfadc86f4c83a649efa09 Mon Sep 17 00:00:00 2001 From: Dan <44686976+GithubAccountOfDanielDavis@users.noreply.github.com> Date: Sun, 11 Dec 2022 14:22:44 -0500 Subject: [PATCH 6/6] Add props to color --- packages/dante3/src/popovers/color.tsx | 20 +++++++++++++++----- 1 file changed, 15 insertions(+), 5 deletions(-) diff --git a/packages/dante3/src/popovers/color.tsx b/packages/dante3/src/popovers/color.tsx index def8af41..cd4a82a5 100644 --- a/packages/dante3/src/popovers/color.tsx +++ b/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 = (props) => { const [open, setOpen] = useState(false); const [value, setValue] = useState(props.value); const debouncedValue = useDebounce(value, 200); - function toggle(ev) { + const toggle: MouseEventHandler = (ev) => { // let selection = this.props.editorState.getSelection() // prevent unselection of selection ev.preventDefault(); @@ -25,14 +31,16 @@ 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; @@ -68,3 +76,5 @@ export default function DanteTooltipColor(props) {
    • ); } + +export default DanteTooltipColor \ No newline at end of file