From 7d338149f0bb3a803340a09e2adeb43b509c22c4 Mon Sep 17 00:00:00 2001 From: tonyrewin Date: Sun, 23 Oct 2022 13:48:03 +0300 Subject: [PATCH] editor types, checkbox fix, baseurl fix --- src/components/Editor/prosemirror/extension/base.ts | 7 ++++--- .../Editor/prosemirror/extension/paste-markdown.ts | 4 ++-- .../Editor/prosemirror/extension/prompt.ts | 8 ++++---- .../Editor/prosemirror/extension/strikethrough.ts | 7 ++++--- .../Editor/prosemirror/extension/table.ts | 7 ++++--- .../Editor/prosemirror/extension/todo-list.ts | 7 ++++--- src/components/Editor/prosemirror/helpers.ts | 4 ++-- src/components/Editor/store/actions.ts | 13 ++++++++----- src/components/Editor/store/context.ts | 7 ++++++- src/styles/app.scss | 5 +++-- src/utils/config.ts | 4 ++-- 11 files changed, 43 insertions(+), 30 deletions(-) diff --git a/src/components/Editor/prosemirror/extension/base.ts b/src/components/Editor/prosemirror/extension/base.ts index ed88197a..40c28f38 100644 --- a/src/components/Editor/prosemirror/extension/base.ts +++ b/src/components/Editor/prosemirror/extension/base.ts @@ -1,5 +1,5 @@ import { schema as markdownSchema } from 'prosemirror-markdown' -import { Schema } from 'prosemirror-model' +import { NodeSpec, Schema } from 'prosemirror-model' import { baseKeymap } from 'prosemirror-commands' import { sinkListItem, liftListItem } from 'prosemirror-schema-list' import { history } from 'prosemirror-history' @@ -7,6 +7,7 @@ import { dropCursor } from 'prosemirror-dropcursor' import { buildKeymap } from 'prosemirror-example-setup' import { keymap } from 'prosemirror-keymap' import type { ProseMirrorExtension } from '../helpers' +import type OrderedMap from 'orderedmap' const plainSchema = new Schema({ nodes: { @@ -29,7 +30,7 @@ const blockquoteSchema = { content: 'block+', group: 'block', toDOM: () => ['div', ['blockquote', 0]] -} +} as NodeSpec export default (plain = false): ProseMirrorExtension => ({ schema: () => @@ -39,7 +40,7 @@ export default (plain = false): ProseMirrorExtension => ({ marks: plainSchema.spec.marks } : { - nodes: (markdownSchema.spec.nodes as any).update('blockquote', blockquoteSchema), + nodes: (markdownSchema.spec.nodes as OrderedMap).update('blockquote', blockquoteSchema), marks: markdownSchema.spec.marks }, plugins: (prev, schema) => [ diff --git a/src/components/Editor/prosemirror/extension/paste-markdown.ts b/src/components/Editor/prosemirror/extension/paste-markdown.ts index 9516cc0c..64244071 100644 --- a/src/components/Editor/prosemirror/extension/paste-markdown.ts +++ b/src/components/Editor/prosemirror/extension/paste-markdown.ts @@ -2,7 +2,7 @@ import { Plugin, Transaction } from 'prosemirror-state' import { Fragment, Node, Schema, Slice } from 'prosemirror-model' import type { ProseMirrorExtension } from '../helpers' import { createMarkdownParser } from '../../markdown' -import { openPrompt } from './prompt' +// import { openPrompt } from './prompt' const URL_REGEX = /(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:\d+)?(\/|\/([\w!#%&+./:=?@-]))?/g @@ -11,7 +11,7 @@ const transform = (schema: Schema, fragment: Fragment) => { fragment.forEach((child: Node) => { if (child.isText) { let pos = 0 - let match: any + let match: RegExpExecArray while ((match = URL_REGEX.exec(child.text)) !== null) { const start = match.index diff --git a/src/components/Editor/prosemirror/extension/prompt.ts b/src/components/Editor/prosemirror/extension/prompt.ts index 9d529b8b..43fa2e69 100644 --- a/src/components/Editor/prosemirror/extension/prompt.ts +++ b/src/components/Editor/prosemirror/extension/prompt.ts @@ -1,7 +1,7 @@ const prefix = 'ProseMirror-prompt' // eslint-disable-next-line sonarjs/cognitive-complexity -export function openPrompt(options: any) { +export function openPrompt(options) { const wrapper = document.body.appendChild(document.createElement('div')) wrapper.className = prefix @@ -14,7 +14,7 @@ export function openPrompt(options: any) { if (wrapper.parentNode) wrapper.remove() } - const domFields: Node[] = [] + const domFields: HTMLElement[] = [] options.fields.forEach((name) => { domFields.push(options.fields[name].render()) }) @@ -33,7 +33,7 @@ export function openPrompt(options: any) { if (options.title) { form.appendChild(document.createElement('h5')).textContent = options.title } - domFields.forEach((field: Node) => { + domFields.forEach((field: HTMLElement) => { form.appendChild(document.createElement('div')).appendChild(field) }) const buttons = form.appendChild(document.createElement('div')) @@ -77,7 +77,7 @@ export function openPrompt(options: any) { if (input) input.focus() } -function getValues(fields: any, domFields: any) { +function getValues(fields: any, domFields: HTMLElement[]) { const result = Object.create(null) let i = 0 fields.forEarch((name) => { diff --git a/src/components/Editor/prosemirror/extension/strikethrough.ts b/src/components/Editor/prosemirror/extension/strikethrough.ts index 23195372..4c95aa76 100644 --- a/src/components/Editor/prosemirror/extension/strikethrough.ts +++ b/src/components/Editor/prosemirror/extension/strikethrough.ts @@ -1,7 +1,8 @@ import { inputRules } from 'prosemirror-inputrules' -import type { MarkType } from 'prosemirror-model' +import type { MarkSpec, MarkType } from 'prosemirror-model' import { markInputRule } from './mark-input-rule' import type { ProseMirrorExtension } from '../helpers' +import type OrderedMap from 'orderedmap' const strikethroughRule = (nodeType: MarkType) => markInputRule(/~{2}(.+)~{2}$/, nodeType) @@ -10,12 +11,12 @@ const strikethroughSchema = { parseDOM: [{ tag: 'del' }], toDOM: () => ['del'] } -} +} as MarkSpec export default (): ProseMirrorExtension => ({ schema: (prev) => ({ ...prev, - marks: (prev.marks as any).append(strikethroughSchema) + marks: (prev.marks as OrderedMap).append(strikethroughSchema) }), plugins: (prev, schema) => [ ...prev, diff --git a/src/components/Editor/prosemirror/extension/table.ts b/src/components/Editor/prosemirror/extension/table.ts index 8eb98aef..5e946273 100644 --- a/src/components/Editor/prosemirror/extension/table.ts +++ b/src/components/Editor/prosemirror/extension/table.ts @@ -1,8 +1,9 @@ import { EditorState, Selection } from 'prosemirror-state' -import type { Node, Schema, ResolvedPos } from 'prosemirror-model' +import type { Node, Schema, ResolvedPos, NodeSpec } from 'prosemirror-model' import { InputRule, inputRules } from 'prosemirror-inputrules' import { keymap } from 'prosemirror-keymap' import type { ProseMirrorExtension } from '../helpers' +import type OrderedMap from 'orderedmap' export const tableInputRule = (schema: Schema) => new InputRule( @@ -95,7 +96,7 @@ const tableSchema = { ], toDOM: (node: Node) => ['th', node.attrs, 0] } -} +} as NodeSpec const findParentPos = ($pos: ResolvedPos, fn: (n: Node) => boolean) => { for (let d = $pos.depth; d > 0; d--) { @@ -174,7 +175,7 @@ const getTextSize = (n: Node) => { export default (): ProseMirrorExtension => ({ schema: (prev) => ({ ...prev, - nodes: (prev.nodes as any).append(tableSchema) + nodes: (prev.nodes as OrderedMap).append(tableSchema) }), // eslint-disable-next-line sonarjs/cognitive-complexity plugins: (prev, schema) => [ diff --git a/src/components/Editor/prosemirror/extension/todo-list.ts b/src/components/Editor/prosemirror/extension/todo-list.ts index 62e5b457..7e7ebe24 100644 --- a/src/components/Editor/prosemirror/extension/todo-list.ts +++ b/src/components/Editor/prosemirror/extension/todo-list.ts @@ -1,9 +1,10 @@ -import { DOMOutputSpec, DOMSerializer, Node as ProsemirrorNode, NodeType, Schema } from 'prosemirror-model' +import { DOMOutputSpec, DOMSerializer, Node as ProsemirrorNode, NodeSpec, NodeType, Schema } from 'prosemirror-model' import type { EditorView } from 'prosemirror-view' import { wrappingInputRule , inputRules } from 'prosemirror-inputrules' import { splitListItem } from 'prosemirror-schema-list' import { keymap } from 'prosemirror-keymap' import type { NodeViewFn, ProseMirrorExtension } from '../helpers' +import type OrderedMap from 'orderedmap' const todoListRule = (nodeType: NodeType) => wrappingInputRule(new RegExp('^\\[( |x)]\\s$'), nodeType, (match) => ({ @@ -44,7 +45,7 @@ const todoListSchema = { ['div', 0] ] } -} +} as NodeSpec class TodoItemView { contentDOM: Node @@ -78,7 +79,7 @@ const todoListKeymap = (schema: Schema) => ({ export default (): ProseMirrorExtension => ({ schema: (prev) => ({ ...prev, - nodes: (prev.nodes as any).append(todoListSchema) + nodes: (prev.nodes as OrderedMap).append(todoListSchema) }), plugins: (prev, schema) => [ keymap(todoListKeymap(schema)), diff --git a/src/components/Editor/prosemirror/helpers.ts b/src/components/Editor/prosemirror/helpers.ts index 88f0bb3c..8738240e 100644 --- a/src/components/Editor/prosemirror/helpers.ts +++ b/src/components/Editor/prosemirror/helpers.ts @@ -17,9 +17,9 @@ export type NodeViewFn = ( decorations: Decoration[] ) => NodeView -export const isInitialized = (state: any) => state !== undefined && state instanceof EditorState +export const isInitialized = (state) => state !== undefined && state instanceof EditorState -export const isEmpty = (state: any) => +export const isEmpty = (state) => !isInitialized(state) || (state.doc.childCount === 1 && !state.doc.firstChild.type.spec.code && diff --git a/src/components/Editor/store/actions.ts b/src/components/Editor/store/actions.ts index 18c7f646..f2130d27 100644 --- a/src/components/Editor/store/actions.ts +++ b/src/components/Editor/store/actions.ts @@ -6,7 +6,7 @@ import { selectAll, deleteSelection } from 'prosemirror-commands' import { undo as yUndo, redo as yRedo } from 'y-prosemirror' import debounce from 'lodash/debounce' import { createSchema, createExtensions, createEmptyText } from '../prosemirror/setup' -import { State, Draft, Config, ServiceError, newState, ExtensionsProps } from './context' +import { State, Draft, Config, ServiceError, newState, ExtensionsProps, EditorActions } from './context' import { mod } from '../env' import { serialize, createMarkdownParser } from '../markdown' import db from '../db' @@ -16,11 +16,12 @@ const isText = (x) => x && x.doc && x.selection const isState = (x) => typeof x.lastModified !== 'string' && Array.isArray(x.drafts || []) const isDraft = (x): boolean => x && (x.text || x.path) -export const createCtrl = (initial: State): [Store, any] => { + +export const createCtrl = (initial: State): [Store, EditorActions] => { const [store, setState] = createStore(initial) const onUndo = () => { - if (!isInitialized(store.text)) return + if (!isInitialized(store.text)) return false const text = store.text as EditorState if (store.collab?.started) { yUndo(text) @@ -53,12 +54,14 @@ export const createCtrl = (initial: State): [Store, any] => { return true } + + const toggleMarkdown = () => { const state = unwrap(store) const editorState = store.text as EditorState const markdown = !state.markdown const selection = { type: 'text', anchor: 1, head: 1 } - let doc: any + let doc if (markdown) { const lines = serialize(editorState).split('\n') @@ -178,7 +181,7 @@ export const createCtrl = (initial: State): [Store, any] => { const room = window.location.pathname?.slice(1).trim() const args = { room: room ?? undefined } const data = await db.get('state') - let parsed: any + let parsed: State if (data !== undefined) { try { parsed = JSON.parse(data) diff --git a/src/components/Editor/store/context.ts b/src/components/Editor/store/context.ts index e5141835..60554489 100644 --- a/src/components/Editor/store/context.ts +++ b/src/components/Editor/store/context.ts @@ -89,6 +89,11 @@ export interface Draft { extensions?: ProseMirrorExtension[] } +export interface EditorActions { + // eslint-disable-next-line @typescript-eslint/no-explicit-any + [key:string]: any +} + export class ServiceError extends Error { public errorObject: ErrorObject constructor(id: string, props: unknown) { @@ -97,7 +102,7 @@ export class ServiceError extends Error { } } -export const StateContext = createContext<[Store, any]>([undefined, undefined]) +export const StateContext = createContext<[Store, EditorActions]>([undefined, undefined]) export const useState = () => useContext(StateContext) diff --git a/src/styles/app.scss b/src/styles/app.scss index 198690bc..0b7d8b37 100644 --- a/src/styles/app.scss +++ b/src/styles/app.scss @@ -308,7 +308,7 @@ input[type='checkbox'] { position: relative; &::before { - background: url('/icons/checkbox.svg') no-repeat; + // background: url('/icons/checkbox.svg') no-repeat; content: ''; height: 2rem; left: 0; @@ -320,7 +320,8 @@ input[type='checkbox'] { &:checked + label { &::before { - background-image: url('/icons/checkbox-checked.svg'); + // background-image: url('/icons/checkbox-checked.svg'); + position: relative; } } } diff --git a/src/utils/config.ts b/src/utils/config.ts index 0629577a..75f03f39 100644 --- a/src/utils/config.ts +++ b/src/utils/config.ts @@ -1,4 +1,4 @@ export const isDev = import.meta.env.MODE === 'development' -// export const apiBaseUrl = 'https://newapi.discours.io' -export const apiBaseUrl = 'http://localhost:8080' +export const apiBaseUrl = 'https://newapi.discours.io' +// export const apiBaseUrl = 'http://localhost:8000'