diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/client/util/RichTextSchema.tsx | 38 |
1 files changed, 33 insertions, 5 deletions
diff --git a/src/client/util/RichTextSchema.tsx b/src/client/util/RichTextSchema.tsx index 9e4f06919..3957a1f26 100644 --- a/src/client/util/RichTextSchema.tsx +++ b/src/client/util/RichTextSchema.tsx @@ -22,6 +22,7 @@ import { ObjectField } from "../../new_fields/ObjectField"; import { ComputedField } from "../../new_fields/ScriptField"; import { observer } from "mobx-react"; import { Id } from "../../new_fields/FieldSymbols"; +import { OnChangeHandler } from "react-color/lib/components/common/ColorWrap"; const blockquoteDOM: DOMOutputSpecArray = ["blockquote", 0], hrDOM: DOMOutputSpecArray = ["hr"], preDOM: DOMOutputSpecArray = ["pre", ["code", 0]], brDOM: DOMOutputSpecArray = ["br"], ulDOM: DOMOutputSpecArray = ["ul", 0]; @@ -850,22 +851,42 @@ export class DashDocView { export class DashFieldView { _fieldWrapper: HTMLDivElement; _labelSpan: HTMLSpanElement; - _fieldSpan: HTMLSpanElement; + _fieldSpan: HTMLDivElement; _reactionDisposer: IReactionDisposer | undefined; _textBoxDoc: Doc; @observable _dashDoc: Doc | undefined; + _fieldKey: string; constructor(node: any, view: any, getPos: any, tbox: FormattedTextBox) { + this._fieldKey = node.attrs.fieldKey; this._textBoxDoc = tbox.props.Document; this._fieldWrapper = document.createElement("div"); this._fieldWrapper.style.width = node.attrs.width; this._fieldWrapper.style.height = node.attrs.height; this._fieldWrapper.style.position = "relative"; - this._fieldWrapper.style.display = "inline"; + this._fieldWrapper.style.display = "inline-block"; - this._fieldSpan = document.createElement("span"); + this._fieldSpan = document.createElement("div"); + this._fieldSpan.id = Utils.GenerateGuid(); + this._fieldSpan.contentEditable = "true"; this._fieldSpan.style.position = "relative"; - this._fieldSpan.style.display = "inline"; + this._fieldSpan.style.display = "inline-block"; + this._fieldSpan.style.minWidth = "50px"; + this._fieldSpan.style.backgroundColor = "rgba(155, 155, 155, 0.24)"; + this._fieldSpan.addEventListener("input", this.onchanged); + const self = this; + this._fieldSpan.onkeydown = function (e: any) { + e.stopPropagation(); + if (e.key === "Tab" || e.key === "Enter" || (e.key === "a" && e.ctrlKey) || (e.key === "a" && e.metaKey)) { + if (window.getSelection) { + var range = document.createRange(); + range.selectNodeContents(self._fieldSpan); + window.getSelection()!.removeAllRanges(); + window.getSelection()!.addRange(range); + } + e.preventDefault(); + } + }; this._labelSpan = document.createElement("span"); this._labelSpan.style.position = "relative"; @@ -880,15 +901,22 @@ export class DashFieldView { this._dashDoc = tbox.props.DataDoc || tbox.dataDoc; } this._reactionDisposer?.(); - this._reactionDisposer = reaction(() => this._dashDoc?.[node.attrs.fieldKey], fval => this._fieldSpan.innerHTML = Field.toString(fval as Field), { fireImmediately: true }); + this._reactionDisposer = reaction(() => this._dashDoc?.[node.attrs.fieldKey], fval => this._fieldSpan.innerHTML = Field.toString(fval as Field) || "(null)", { fireImmediately: true }); this._fieldWrapper.appendChild(this._labelSpan); this._fieldWrapper.appendChild(this._fieldSpan); (this as any).dom = this._fieldWrapper; } + onchanged = () => { + this._reactionDisposer?.(); + this._dashDoc![this._fieldKey] = this._fieldSpan.innerText; + this._reactionDisposer = reaction(() => this._dashDoc?.[this._fieldKey], fval => this._fieldSpan.innerHTML = Field.toString(fval as Field) || "(null)"); + + } destroy() { this._reactionDisposer?.(); } + selectNode() { } } export class OrderedListView { |