diff options
Diffstat (limited to 'src/client/views/nodes')
5 files changed, 73 insertions, 2 deletions
diff --git a/src/client/views/nodes/DocumentContentsView.tsx b/src/client/views/nodes/DocumentContentsView.tsx index c0af1e08a..02c112745 100644 --- a/src/client/views/nodes/DocumentContentsView.tsx +++ b/src/client/views/nodes/DocumentContentsView.tsx @@ -11,6 +11,7 @@ import { CollectionView } from "../collections/CollectionView"; import { YoutubeBox } from "./../../apis/youtube/YoutubeBox"; import { AudioBox } from "./AudioBox"; import { LabelBox } from "./LabelBox"; +import { EquationBox } from "./EquationBox"; import { SliderBox } from "./SliderBox"; import { LinkBox } from "./LinkBox"; import { ScriptingBox } from "./ScriptingBox"; @@ -220,7 +221,7 @@ export class DocumentContentsView extends React.Component<DocumentViewProps & Fo blacklistedAttrs={emptyPath} renderInWrapper={false} components={{ - FormattedTextBox, ImageBox, DirectoryImportBox, FontIconBox, LabelBox, SliderBox, FieldView, + FormattedTextBox, ImageBox, DirectoryImportBox, FontIconBox, LabelBox, EquationBox, SliderBox, FieldView, CollectionFreeFormView, CollectionDockingView, CollectionSchemaView, CollectionView, WebBox, KeyValueBox, PDFBox, VideoBox, AudioBox, PresBox, YoutubeBox, PresElementBox, SearchBox, FilterBox, ColorBox, DashWebRTCVideo, LinkAnchorBox, InkingStroke, DocHolderBox, LinkBox, ScriptingBox, diff --git a/src/client/views/nodes/EquationBox.scss b/src/client/views/nodes/EquationBox.scss new file mode 100644 index 000000000..e69de29bb --- /dev/null +++ b/src/client/views/nodes/EquationBox.scss diff --git a/src/client/views/nodes/EquationBox.tsx b/src/client/views/nodes/EquationBox.tsx new file mode 100644 index 000000000..8ded4111c --- /dev/null +++ b/src/client/views/nodes/EquationBox.tsx @@ -0,0 +1,66 @@ +import EquationEditor from 'equation-editor-react'; +import { observer } from 'mobx-react'; +import * as React from 'react'; +import { documentSchema } from '../../../fields/documentSchemas'; +import { createSchema, makeInterface } from '../../../fields/Schema'; +import { StrCast, NumCast } from '../../../fields/Types'; +import { ViewBoxBaseComponent } from '../DocComponent'; +import { FieldView, FieldViewProps } from './FieldView'; +import './LabelBox.scss'; +import { Id } from '../../../fields/FieldSymbols'; +import { simulateMouseClick } from '../../../Utils'; +import { TraceMobx } from '../../../fields/util'; +import { reaction, action } from 'mobx'; +import { Docs } from '../../documents/Documents'; + +const EquationSchema = createSchema({}); + +type EquationDocument = makeInterface<[typeof EquationSchema, typeof documentSchema]>; +const EquationDocument = makeInterface(EquationSchema, documentSchema); + +@observer +export class EquationBox extends ViewBoxBaseComponent<FieldViewProps, EquationDocument>(EquationDocument) { + public static LayoutString(fieldKey: string) { return FieldView.LayoutString(EquationBox, fieldKey); } + public static SelectOnLoad: string = ""; + _ref: React.RefObject<EquationEditor> = React.createRef(); + componentDidMount() { + if (EquationBox.SelectOnLoad === this.rootDoc[Id]) { + this.props.select(false); + + this._ref.current!.mathField.focus(); + this._ref.current!.mathField.select(); + } + reaction(() => this.props.isSelected(), + selected => { + if (this._ref.current) { + if (selected) this._ref.current.element.current.children[0].addEventListener("keydown", this.keyPressed, true); + else this._ref.current.element.current.children[0].removeEventListener("keydown", this.keyPressed); + } + }, { fireImmediately: true }); + } + @action + keyPressed = (e: KeyboardEvent) => { + if (e.key === "Enter") { + const _height = Number(getComputedStyle(this._ref.current!.element.current).height.replace("px", "")); + const _width = Number(getComputedStyle(this._ref.current!.element.current).width.replace("px", "")); + this.layoutDoc._width = _width; + this.layoutDoc._height = _height; + const nextEq = Docs.Create.EquationDocument({ title: "# math", text: StrCast(this.dataDoc.text), x: NumCast(this.layoutDoc.x), y: NumCast(this.layoutDoc.y) + _height + 10, _width, _height: 35 }); + EquationBox.SelectOnLoad = nextEq[Id]; + this.props.addDocument?.(nextEq); + e.stopPropagation(); + } + if (e.key === "Backspace" && !this.dataDoc.text) this.props.removeDocument?.(this.rootDoc); + } + onChange = (str: string) => this.dataDoc.text = str; + render() { + TraceMobx(); + return (<div onPointerDown={e => this.props.isSelected() && !e.ctrlKey && e.stopPropagation()}> + <EquationEditor ref={this._ref} + value={this.dataDoc.text || "y"} + onChange={this.onChange} + autoCommands="pi theta sqrt sum prod alpha beta gamma rho" + autoOperatorNames="sin cos tan" /></div> + ); + } +}
\ No newline at end of file diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx index 288cd14c9..5066578aa 100644 --- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx +++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx @@ -1541,7 +1541,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp /> </div> {this.props.noSidebar || !this.layoutDoc._showSidebar || this.sidebarWidthPercent === "0%" ? (null) : this.sidebarCollection} - {this.sidebarHandle} + {this.Document._singleLine ? (null) : this.sidebarHandle} {!this.layoutDoc._showAudio ? (null) : this.audioHandle} </div> </div> diff --git a/src/client/views/nodes/formattedText/ProsemirrorExampleTransfer.ts b/src/client/views/nodes/formattedText/ProsemirrorExampleTransfer.ts index a1a404e10..eae4c0179 100644 --- a/src/client/views/nodes/formattedText/ProsemirrorExampleTransfer.ts +++ b/src/client/views/nodes/formattedText/ProsemirrorExampleTransfer.ts @@ -144,6 +144,10 @@ export function buildKeymap<S extends Schema<any>>(schema: S, props: any, mapKey bind("Alt-\\", setBlockType(schema.nodes.paragraph)); bind("Shift-Ctrl-\\", setBlockType(schema.nodes.code_block)); + bind("Ctrl-m", (state: EditorState<S>, dispatch: (tx: Transaction<S>) => void) => { + dispatch(state.tr.replaceSelectionWith(schema.nodes.dashField.create({ fieldKey: "math" + Utils.GenerateGuid() }))); + }) + for (let i = 1; i <= 6; i++) { bind("Shift-Ctrl-" + i, setBlockType(schema.nodes.heading, { level: i })); } |