Switched to using Verbum (https://github.com/ozanyurtsever/verbum) which builds on Lexical to create a rich text editor; Isolated the rich text editor into a component so it can be easily swapped out; Added a higher resolution background for the student login page; Still a lot of bugs in the workshop list view.

2022-10-27 08:56:26 -07:00
parent 77b420ea6f
commit cab09e59b9
10 changed files with 433 additions and 24 deletions
--- a/imports/ui/components/RichText/Editor.jsx
+++ b/imports/ui/components/RichText/Editor.jsx
@@ -0,0 +1,122 @@
+// import {RichTextPlugin} from "@lexical/react/LexicalRichTextPlugin";
+// import {ContentEditable} from "@lexical/react/LexicalContentEditable";
+// import {OnChangePlugin} from "@lexical/react/LexicalOnChangePlugin";
+// import {HistoryPlugin} from "@lexical/react/LexicalHistoryPlugin";
+// import {LinkPlugin} from "@lexical/react/LexicalLinkPlugin";
+// import {MarkdownShortcutPlugin} from "@lexical/react/LexicalMarkdownShortcutPlugin";
+// import {LexicalComposer} from "@lexical/react/LexicalComposer";
+
+// import {AutoFocusPlugin} from '@lexical/react/LexicalAutoFocusPlugin';
+// import {AutoScrollPlugin} from '@lexical/react/LexicalAutoScrollPlugin';
+// import {CharacterLimitPlugin} from '@lexical/react/LexicalCharacterLimitPlugin';
+// import {CheckListPlugin} from '@lexical/react/LexicalCheckListPlugin';
+// import {ClearEditorPlugin} from '@lexical/react/LexicalClearEditorPlugin';
+// import {CollaborationPlugin} from '@lexical/react/LexicalCollaborationPlugin';
+// import {HashtagPlugin} from '@lexical/react/LexicalHashtagPlugin';
+// import {ListPlugin} from '@lexical/react/LexicalListPlugin';
+// // import {PlainTextPlugin} from '@lexical/react/LexicalPlainTextPlugin';
+// import {TablePlugin} from '@lexical/react/LexicalTablePlugin';
+
+// import {createWebsocketProvider} from './collaboration'
+// import {useSettings} from './context/SettingsContext'
+// import {useSharedHistoryContext} from './context/SharedHistoryContext'
+// import TableCellNodes from './nodes/TableCellNodes'
+// import ActionsPlugin from './plugins/ActionsPlugin'
+// import AutocompletePlugin from './plugins/AutocompletePlugin'
+// import AutoEmbedPlugin from './plugins/AutoEmbedPlugin'
+// import AutoLinkPlugin from './plugins/AutoLinkPlugin'
+// import ClickableLinkPlugin from './plugins/ClickableLinkPlugin'
+// import CodeActionMenuPlugin from './plugins/CodeActionMenuPlugin';
+// import CodeHighlightPlugin from './plugins/CodeHighlightPlugin'
+// import CollapsiblePlugin from './plugins/CollapsiblePlugin'
+// import CommentPlugin from './plugins/CommentPlugin'
+// import ComponentPickerPlugin from './plugins/ComponentPickerPlugin'
+// import DraggableBlockPlugin from './plugins/DraggableBlockPlugin'
+// import EmojiPickerPlugin from './plugins/EmojiPickerPlugin'
+// import EmojisPlugin from './plugins/EmojisPlugin'
+// import EquationsPlugin from './plugins/EquationsPlugin'
+// import ExcalidrawPlugin from './plugins/ExcalidrawPlugin'
+// import FigmaPlugin from './plugins/FigmaPlugin'
+// import FloatingLinkEditorPlugin from './plugins/FloatingLinkEditorPlugin'
+// import FloatingTextFormatToolbarPlugin from './plugins/FloatingTextFormatToolbarPlugin'
+// import HorizontalRulePlugin from './plugins/HorizontalRulePlugin'
+// import ImagesPlugin from './plugins/ImagesPlugin'
+// import KeywordsPlugin from './plugins/KeywordsPlugin'
+// import ListMaxIndentLevelPlugin from './plugins/ListMaxIndentLevelPlugin'
+// import MarkdownShortcutPlugin from './plugins/MarkdownShortcutPlugin'
+// import {MaxLengthPlugin} from './plugins/MaxLengthPlugin'
+// import MentionsPlugin from './plugins/MentionsPlugin'
+// import PollPlugin from './plugins/PollPlugin'
+// import SpeechToTextPlugin from './plugins/SpeechToTextPlugin'
+// import TabFocusPlugin from './plugins/TabFocusPlugin'
+// import TableCellActionMenuPlugin from './plugins/TableActionMenuPlugin'
+// import TableCellResizer from './plugins/TableCellResizer'
+// import TableOfContentsPlugin from './plugins/TableOfContentsPlugin'
+// import {TablePlugin as NewTablePlugin} from './plugins/TablePlugin'
+// import ToolbarPlugin from './plugins/ToolbarPlugin'
+// import TreeViewPlugin from './plugins/TreeViewPlugin'
+// import TwitterPlugin from './plugins/TwitterPlugin'
+// import YouTubePlugin from './plugins/YouTubePlugin'
+// import PlaygroundEditorTheme from './themes/PlaygroundEditorTheme'
+// import ContentEditable from './ui/ContentEditable'
+// import ErrorBoundary from './ui/ErrorBoundary'
+// import Placeholder from './ui/Placeholder'
+
+import * as React from 'react';
+import {useRef, useState} from 'react';
+import {
+	EditorComposer,
+	Editor as InternalEditor,
+	ToolbarPlugin,
+	AlignDropdown,
+	BackgroundColorPicker,
+	BoldButton,
+	CodeFormatButton,
+	FloatingLinkEditor,
+	FontFamilyDropdown,
+	FontSizeDropdown,
+	InsertDropdown,
+	InsertLinkButton,
+	ItalicButton,
+	TextColorPicker,
+	TextFormatDropdown,
+	UnderlineButton,
+	Divider,
+} from 'verbum';
+
+// import nodes from './Nodes'
+
+export const Editor = (props) => {
+	return (
+		// <LexicalComposer initialConfig={{editorState: props.state, namespace: props.namespace, onError: props.onError, theme: props.theme, nodes}}>
+		// 	<ToolbarPlugin/>
+		// 	<RichTextPlugin contentEditable={<ContentEditable/>} placeholder={<div>Sample...</div>}/>
+		// 	{props.onChange && <OnChangePlugin onChange={props.onChange} ignoreSelectionChange={true}/>}
+		// 	<HistoryPlugin/>
+		// 	<LinkPlugin/>
+		// 	<MarkdownShortcutPlugin/>
+		// </LexicalComposer>
+
+		<EditorComposer>
+			<InternalEditor hashtagsEnabled={true} onChange={props.onChange} initialEditorState={props.state}>
+				<ToolbarPlugin defaultFontSize="20px">
+					<FontFamilyDropdown />
+					<FontSizeDropdown />
+					<Divider />
+					<BoldButton />
+					<ItalicButton />
+					<UnderlineButton />
+					<CodeFormatButton />
+					<InsertLinkButton />
+					<TextColorPicker />
+					<BackgroundColorPicker />
+					<TextFormatDropdown />
+					<Divider />
+					<InsertDropdown enablePoll={true} enableTable={true} />
+					<Divider />
+					<AlignDropdown />
+				</ToolbarPlugin>
+			</InternalEditor>
+		</EditorComposer>
+	)
+}