From 4574b7f03ccc85c4bebdbfd9475788456086704f Mon Sep 17 00:00:00 2001 From: bobzel Date: Thu, 8 Aug 2024 12:27:40 -0400 Subject: many changes to add typing in place of 'any's etc --- src/client/util/CalendarManager.tsx | 44 +++-- src/client/util/CaptureManager.tsx | 10 +- src/client/util/CurrentUserUtils.ts | 80 ++++----- src/client/util/DictationManager.ts | 43 ++--- src/client/util/DocumentManager.ts | 39 ++--- src/client/util/DragManager.ts | 103 +++++++----- src/client/util/DropConverter.ts | 13 +- src/client/util/GroupManager.tsx | 22 +-- src/client/util/GroupMemberView.tsx | 2 - src/client/util/History.ts | 7 +- src/client/util/Import & Export/ImageUtils.ts | 1 + .../util/Import & Export/ImportMetadataEntry.tsx | 2 - src/client/util/InteractionUtils.tsx | 22 +-- src/client/util/LinkFollower.ts | 4 +- src/client/util/LinkManager.ts | 43 ++--- src/client/util/ProsemirrorCopy/prompt.js | 179 --------------------- src/client/util/RTFMarkup.tsx | 4 +- src/client/util/ReplayMovements.ts | 15 +- src/client/util/Scripting.ts | 34 ++-- src/client/util/ScriptingGlobals.ts | 42 ++--- src/client/util/SearchUtil.ts | 2 + src/client/util/SelectionManager.ts | 2 +- src/client/util/SerializationHelper.ts | 36 +++-- src/client/util/ServerStats.tsx | 19 ++- src/client/util/SettingsManager.tsx | 2 - src/client/util/SharingManager.tsx | 23 ++- src/client/util/SnappingManager.ts | 2 +- src/client/util/TrackMovements.ts | 8 +- src/client/util/TypedEvent.ts | 2 +- src/client/util/UndoManager.ts | 34 ++-- src/client/util/reportManager/ReportManager.tsx | 6 +- .../util/reportManager/ReportManagerComponents.tsx | 11 +- .../util/reportManager/reportManagerSchema.ts | 40 ++--- .../util/reportManager/reportManagerUtils.ts | 16 +- src/client/util/request-image-size.ts | 36 ++--- 35 files changed, 386 insertions(+), 562 deletions(-) delete mode 100644 src/client/util/ProsemirrorCopy/prompt.js (limited to 'src/client/util') diff --git a/src/client/util/CalendarManager.tsx b/src/client/util/CalendarManager.tsx index 77cf80151..d0cd69273 100644 --- a/src/client/util/CalendarManager.tsx +++ b/src/client/util/CalendarManager.tsx @@ -1,5 +1,3 @@ -/* eslint-disable jsx-a11y/no-static-element-interactions */ -/* eslint-disable jsx-a11y/click-events-have-key-events */ import { DateRangePicker, Provider, defaultTheme } from '@adobe/react-spectrum'; import { IconLookup, faPlus } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; @@ -19,6 +17,7 @@ import { DocumentView } from '../views/nodes/DocumentView'; import { TaskCompletionBox } from '../views/nodes/TaskCompletedBox'; import './CalendarManager.scss'; import { SnappingManager } from './SnappingManager'; +import { CalendarDate, DateValue } from '@internationalized/date'; // import 'react-date-range/dist/styles.css'; // import 'react-date-range/dist/theme/default.css'; @@ -29,7 +28,7 @@ interface CalendarSelectOptions { value: string; } -const formatCalendarDateToString = (calendarDate: any) => { +const formatCalendarDateToString = (calendarDate: DateValue) => { console.log('Formatting the following date: ', calendarDate); const date = new Date(calendarDate.year, calendarDate.month - 1, calendarDate.day); console.log(typeof date); @@ -44,7 +43,7 @@ const formatCalendarDateToString = (calendarDate: any) => { // TODO: For a doc already in a calendar: give option to edit date range, delete from calendar @observer -export class CalendarManager extends ObservableReactComponent<{}> { +export class CalendarManager extends ObservableReactComponent { // eslint-disable-next-line no-use-before-define public static Instance: CalendarManager; @observable private isOpen = false; @@ -101,7 +100,7 @@ export class CalendarManager extends ObservableReactComponent<{}> { this.layoutDocAcls = false; }); - constructor(props: {}) { + constructor(props: object) { super(props); CalendarManager.Instance = this; makeObservable(this); @@ -109,15 +108,6 @@ export class CalendarManager extends ObservableReactComponent<{}> { componentDidMount(): void {} - @action - handleSelectChange = (option: any) => { - if (option) { - const selectOpt = option as CalendarSelectOptions; - this.selectedExistingCalendarOption = selectOpt; - this.calendarName = selectOpt.value; // or label - } - }; - @action handleCalendarTitleChange = (event: React.ChangeEvent) => { console.log('Existing calendars: ', this.existingCalendars); @@ -212,15 +202,13 @@ export class CalendarManager extends ObservableReactComponent<{}> { }; @observable - selectedDateRange: any = [ - { - start: new Date(), - end: new Date(), - }, - ]; + selectedDateRange: { start: DateValue; end: DateValue } = { + start: new CalendarDate(2024, 1, 1), + end: new CalendarDate(2024, 1, 1), + }; @action - setSelectedDateRange = (range: any) => { + setSelectedDateRange = (range: { start: DateValue; end: DateValue }) => { console.log('Range: ', range); this.selectedDateRange = range; }; @@ -228,14 +216,14 @@ export class CalendarManager extends ObservableReactComponent<{}> { @computed get createButtonActive() { if (this.calendarName.length === 0 || this.errorMessage.length > 0) return false; // disabled if no calendar name - let startDate: Date | undefined; - let endDate: Date | undefined; + let startDate: DateValue | undefined; + let endDate: DateValue | undefined; try { startDate = this.selectedDateRange.start; endDate = this.selectedDateRange.end; console.log(startDate); console.log(endDate); - } catch (e: any) { + } catch (e) { console.log(e); return false; // disabled } @@ -288,7 +276,13 @@ export class CalendarManager extends ObservableReactComponent<{}> { isSearchable options={this.selectOptions} value={this.selectedExistingCalendarOption} - onChange={this.handleSelectChange} + onChange={change => { + if (change) { + const selectOpt = change; + this.selectedExistingCalendarOption = selectOpt; + this.calendarName = selectOpt.value; // or label + } + }} styles={{ control: () => ({ display: 'inline-flex', diff --git a/src/client/util/CaptureManager.tsx b/src/client/util/CaptureManager.tsx index 253cdd8b5..47f31612f 100644 --- a/src/client/util/CaptureManager.tsx +++ b/src/client/util/CaptureManager.tsx @@ -1,26 +1,24 @@ -/* eslint-disable jsx-a11y/no-static-element-interactions */ -/* eslint-disable jsx-a11y/click-events-have-key-events */ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { action, computed, makeObservable, observable } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; import { addStyleSheet } from '../../ClientUtils'; -import { Doc } from '../../fields/Doc'; +import { Doc, Opt } from '../../fields/Doc'; import { DocCast, StrCast } from '../../fields/Types'; import { MainViewModal } from '../views/MainViewModal'; import { DocumentView } from '../views/nodes/DocumentView'; import './CaptureManager.scss'; @observer -export class CaptureManager extends React.Component<{}> { +export class CaptureManager extends React.Component { // eslint-disable-next-line no-use-before-define public static Instance: CaptureManager; static _settingsStyle = addStyleSheet(); - @observable _document: any = undefined; + @observable _document: Opt = undefined; @observable isOpen: boolean = false; // whether the CaptureManager is to be displayed or not. // eslint-disable-next-line react/sort-comp - constructor(props: {}) { + constructor(props: object) { super(props); makeObservable(this); CaptureManager.Instance = this; diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts index e095bc659..c99ce1832 100644 --- a/src/client/util/CurrentUserUtils.ts +++ b/src/client/util/CurrentUserUtils.ts @@ -1,7 +1,7 @@ import { reaction, runInAction } from "mobx"; import * as rp from 'request-promise'; import { ClientUtils, OmitKeys } from "../../ClientUtils"; -import { Doc, DocListCast, DocListCastAsync, Opt } from "../../fields/Doc"; +import { Doc, DocListCast, DocListCastAsync, FieldType, Opt } from "../../fields/Doc"; import { DocData } from "../../fields/DocSymbols"; import { InkTool } from "../../fields/InkField"; import { List } from "../../fields/List"; @@ -60,11 +60,10 @@ interface Button { // fields that do not correspond to DocumentOption fields scripts?: { script?: string; onClick?: string; onDoubleClick?: string } - funcs?: { [key:string]: any}; + funcs?: { [key:string]: string}; subMenu?: Button[]; } -// eslint-disable-next-line import/no-mutable-exports export let resolvedPorts: { server: number, socket: number }; export class CurrentUserUtils { @@ -174,8 +173,8 @@ export class CurrentUserUtils { const imageBox = (opts: DocumentOptions, fieldKey:string) => Docs.Create.ImageDocument( "http://www.cs.brown.edu/~bcz/noImage.png", { layout:ImageBox.LayoutString(fieldKey), "icon_nativeWidth": 360 / 4, "icon_nativeHeight": 270 / 4, iconTemplate:DocumentType.IMG, _width: 360 / 4, _height: 270 / 4, _layout_showTitle: "title", ...opts }); const fontBox = (opts:DocumentOptions, fieldKey:string) => Docs.Create.FontIconDocument({ layout:FontIconBox.LayoutString(fieldKey), _nativeHeight: 30, _nativeWidth: 30, _width: 30, _height: 30, ...opts }); - const makeIconTemplate = (type: DocumentType | undefined, templateField: string, opts:DocumentOptions) => { - const title = "icon" + (type ? "_" + type : ""); + const makeIconTemplate = (name: DocumentType | string | undefined, templateField: string, opts:DocumentOptions) => { + const title = "icon" + (name ? "_" + name : ""); const curIcon = DocCast(templateIconsDoc[title]); const creator = (() => { switch (opts.iconTemplate) { case DocumentType.IMG : return imageBox; @@ -189,6 +188,10 @@ export class CurrentUserUtils { {onClick:"deiconifyView(documentView)", onDoubleClick: "deiconifyViewToLightbox(documentView)", }); }; const iconTemplates = [ + // see createCustomView for where icon templates are created at run time + // templates defined by a Docs icon_fieldKey (e.g., ink with a transciprtion shows a template of the transcribed text, not miniature ink) + makeIconTemplate("transcription", "text", { iconTemplate:DocumentType.LABEL, backgroundColor: "orange" }), + // templates defined by a Doc's type makeIconTemplate(undefined, "title", { iconTemplate:DocumentType.LABEL, backgroundColor: "dimgray"}), makeIconTemplate(DocumentType.AUDIO, "title", { iconTemplate:DocumentType.LABEL, backgroundColor: "lightgreen"}), makeIconTemplate(DocumentType.PDF, "title", { iconTemplate:DocumentType.LABEL, backgroundColor: "pink"}), @@ -199,10 +202,9 @@ export class CurrentUserUtils { makeIconTemplate(DocumentType.COL, "icon", { iconTemplate:DocumentType.IMG}), makeIconTemplate(DocumentType.VID, "icon", { iconTemplate:DocumentType.IMG}), makeIconTemplate(DocumentType.BUTTON,"title", { iconTemplate:DocumentType.FONTICON}), - // nasty hack .. templates are looked up exclusively by type -- but we want a template for a document with a certain field (transcription) .. so this hack and the companion hack in createCustomView does this for now - makeIconTemplate("transcription" as any, "transcription", { iconTemplate:DocumentType.LABEL, backgroundColor: "orange" }), - // makeIconTemplate(DocumentType.PDF, "icon", {iconTemplate:DocumentType.IMG}, (opts) => imageBox("http://www.cs.brown.edu/~bcz/noImage.png", opts)) - ].filter(d => d).map(d => d!); + // makeIconTemplate(DocumentType.PDF, "icon", { iconTemplate:DocumentType.IMG}), + ].filter(d => d).map(d => d!); + DocUtils.AssignOpts(DocCast(doc[field]), {}, iconTemplates); } @@ -349,9 +351,9 @@ pie title Minerals in my tap water plotlyApi(); mermaidsApi(); const emptyThings:{key:string, // the field name where the empty thing will be stored opts:DocumentOptions, // the document options that are required for the empty thing - funcs?:{[key:string]: any}, // computed fields that are rquired for the empth thing - scripts?:{[key:string]: any}, - creator:(opts:DocumentOptions)=> any // how to create the empty thing if it doesn't exist + funcs?:{[key:string]: string}, // computed fields that are rquired for the empth thing + scripts?:{[key:string]: string}, + creator:(opts:DocumentOptions)=> Doc // how to create the empty thing if it doesn't exist }[] = [ {key: "Note", creator: opts => Docs.Create.TextDocument("", opts), opts: { _width: 200, _layout_autoHeight: true }}, {key: "Flashcard", creator: opts => Docs.Create.ComparisonDocument("", opts), opts: { _layout_isFlashcard: true, _width: 300, _height: 300}}, @@ -402,7 +404,7 @@ pie title Minerals in my tap water { toolTip: "Tap or drag to create a collection", title: "Col", icon: "folder", dragFactory: doc.emptyCollection as Doc, clickFactory: DocCast(doc.emptyTab)}, { toolTip: "Tap or drag to create a webpage", title: "Web", icon: "globe-asia", dragFactory: doc.emptyWebpage as Doc, clickFactory: DocCast(doc.emptyWebpage)}, { toolTip: "Tap or drag to create a comparison box", title: "Compare", icon: "columns", dragFactory: doc.emptyComparison as Doc, clickFactory: DocCast(doc.emptyComparison)}, - { toolTip: "Tap or drag to create a diagram", title: "Diagram", icon: "tree", dragFactory: doc.emptyDiagram as Doc, clickFactory: DocCast(doc.emptyDiagram)}, + { toolTip: "Tap or drag to create a diagram", title: "Diagram", icon: "tree", dragFactory: doc.emptyDiagram as Doc, clickFactory: DocCast(doc.emptyDiagram)}, { toolTip: "Tap or drag to create an audio recorder", title: "Audio", icon: "microphone", dragFactory: doc.emptyAudio as Doc, clickFactory: DocCast(doc.emptyAudio), openFactoryLocation: OpenWhere.overlay}, { toolTip: "Tap or drag to create a map", title: "Map", icon: "map-marker-alt", dragFactory: doc.emptyMap as Doc, clickFactory: DocCast(doc.emptyMap)}, { toolTip: "Tap or drag to create a chat assistant", title: "Assistant Chat", icon: "book",dragFactory: doc.emptyChat as Doc, clickFactory: DocCast(doc.emptyChat)}, @@ -411,11 +413,11 @@ pie title Minerals in my tap water { toolTip: "Tap or drag to create a button", title: "Button", icon: "circle", dragFactory: doc.emptyButton as Doc, clickFactory: DocCast(doc.emptyButton)}, { toolTip: "Tap or drag to create a scripting box", title: "Script", icon: "terminal", dragFactory: doc.emptyScript as Doc, clickFactory: DocCast(doc.emptyScript), funcs: { hidden: "IsNoviceMode()"}}, { toolTip: "Tap or drag to create a data viz node", title: "DataViz", icon: "chart-bar", dragFactory: doc.emptyDataViz as Doc, clickFactory: DocCast(doc.emptyDataViz)}, - { toolTip: "Tap or drag to create a bullet slide", title: "PPT Slide", icon: "person-chalkboard", dragFactory: doc.emptySlide as Doc, clickFactory: DocCast(doc.emptySlide), openFactoryLocation: OpenWhere.overlay, funcs: { hidden: "IsNoviceMode()"}}, - { toolTip: "Tap or drag to create a view slide", title: "View Slide", icon: "address-card", dragFactory: doc.emptyViewSlide as Doc,clickFactory: DocCast(doc.emptyViewSlide),openFactoryLocation: OpenWhere.overlay,funcs: { hidden: "IsNoviceMode()"}}, - { toolTip: "Tap or drag to create a data note", title: "DataNote", icon: "window-maximize",dragFactory: doc.emptyHeader as Doc,clickFactory: DocCast(doc.emptyHeader), openFactoryAsDelegate: true, funcs: { hidden: "IsNoviceMode()"} }, - { toolTip: "Toggle a Calculator REPL", title: "replviewer", icon: "calculator", clickFactory: '' as any, openFactoryLocation: OpenWhere.overlay}, // hack: clickFactory is not a Doc but will get interpreted as a custom UI by the openDoc() onClick script - // { toolTip: "Toggle an UndoStack", title: "undostacker", icon: "calculator", clickFactory: "" as any, openFactoryLocation: OpenWhere.overlay}, + { toolTip: "Tap or drag to create a bullet slide", title: "PPT Slide", icon: "person-chalkboard",dragFactory: doc.emptySlide as Doc,clickFactory: DocCast(doc.emptySlide), openFactoryLocation: OpenWhere.overlay, funcs: { hidden: "IsNoviceMode()"}}, + { toolTip: "Tap or drag to create a view slide", title: "View Slide", icon: "address-card", dragFactory: doc.emptyViewSlide as Doc,clickFactory: DocCast(doc.emptyViewSlide), openFactoryLocation: OpenWhere.overlay,funcs: { hidden: "IsNoviceMode()"}}, + { toolTip: "Tap or drag to create a data note", title: "DataNote", icon: "window-maximize",dragFactory: doc.emptyHeader as Doc,clickFactory: DocCast(doc.emptyHeader), openFactoryAsDelegate: true, funcs: { hidden: "IsNoviceMode()"} }, + { toolTip: "Toggle a Calculator REPL", title: "replviewer", icon: "calculator", clickFactory: '' as unknown as Doc, openFactoryLocation: OpenWhere.overlay}, // hack: clickFactory is not a Doc but will get interpreted as a custom UI by the openDoc() onClick script + // { toolTip: "Toggle an UndoStack", title: "undostacker", icon: "calculator", clickFactory: "" as any, openFactoryLocation: OpenWhere.overlay}, ].map(tuple => ( { openFactoryLocation: OpenWhere.addRight, scripts: { onClick: 'openDoc(copyDragFactory(this.clickFactory,this.openFactoryAsDelegate), this.openFactoryLocation)', @@ -445,7 +447,7 @@ pie title Minerals in my tap water } /// returns descriptions needed to buttons for the left sidebar to open up panes displaying different collections of documents - static leftSidebarMenuBtnDescriptions(doc: Doc):{title:string, target:Doc, icon:string, toolTip: string, scripts:{[key:string]:any}, funcs?:{[key:string]:any}, hidden?: boolean}[] { + static leftSidebarMenuBtnDescriptions(doc: Doc):{title:string, target:Doc, icon:string, toolTip: string, scripts:{[key:string]:undefined|string}, funcs?:{[key:string]:undefined|string}, hidden?: boolean}[] { const badgeValue = "((len) => len && len !== '0' ? len: undefined)(docList(this.target?.data).filter(doc => !docList(this.target.viewed).includes(doc)).length.toString())"; const getActiveDashTrails = "Doc.ActiveDashboard?.myTrails"; return [ @@ -463,7 +465,7 @@ pie title Minerals in my tap water /// the empty panel that is filled with whichever left menu button's panel has been selected static setupLeftSidebarPanel(doc: Doc, field="myLeftSidebarPanel") { - DocUtils.AssignDocField(doc, field, (opts) => Doc.assign(new Doc(), opts as any), {title:"leftSidebarPanel", isSystem:true, undoIgnoreFields: new List(['proto'])}); + DocUtils.AssignDocField(doc, field, (opts) => Doc.assign(new Doc(), opts as {[key:string]: FieldType}), {title:"leftSidebarPanel", isSystem:true, undoIgnoreFields: new List(['proto'])}); } /// Initializes the left sidebar menu buttons and the panels they open up @@ -523,7 +525,7 @@ pie title Minerals in my tap water const contextMenuLabels = [/* "Create New Dashboard" */] as string[]; const contextMenuIcons = [/* "plus" */] as string[]; const childContextMenuScripts = [`toggleComicMode()`, `snapshotDashboard()`, `shareDashboard(this)`, 'removeDashboard(this)', 'resetDashboard(this)']; // entries must be kept in synch with childContextMenuLabels, childContextMenuIcons, and childContextMenuFilters - const childContextMenuFilters = ['!IsNoviceMode()', '!IsNoviceMode()', undefined as any, undefined as any, '!IsNoviceMode()'];// entries must be kept in synch with childContextMenuLabels, childContextMenuIcons, and childContextMenuScripts + const childContextMenuFilters = ['!IsNoviceMode()', '!IsNoviceMode()', undefined, undefined, '!IsNoviceMode()'];// entries must be kept in synch with childContextMenuLabels, childContextMenuIcons, and childContextMenuScripts const childContextMenuLabels = ["Toggle Comic Mode", "Snapshot Dashboard", "Share Dashboard", "Remove Dashboard", "Reset Dashboard"];// entries must be kept in synch with childContextMenuScripts, childContextMenuIcons, and childContextMenuFilters const childContextMenuIcons = ["tv", "camera", "users", "times", "trash"]; // entries must be kept in synch with childContextMenuScripts, childContextMenuLabels, and childContextMenuFilters const reqdOpts:DocumentOptions = { @@ -545,7 +547,7 @@ pie title Minerals in my tap water myDashboards.childContextMenuScripts = new List(childContextMenuScripts.map(script => ScriptField.MakeFunction(script)!)); } if (Cast(myDashboards.childContextMenuFilters, listSpec(ScriptField), null)?.length !== childContextMenuFilters.length) { - myDashboards.childContextMenuFilters = new List(childContextMenuFilters.map(script => !script ? script: ScriptField.MakeFunction(script)!)); + myDashboards.childContextMenuFilters = new List(childContextMenuFilters.map(script => !script ? script as unknown as ScriptField: ScriptField.MakeFunction(script)!)); } return myDashboards; } @@ -611,7 +613,7 @@ pie title Minerals in my tap water _lockedPosition: true, isSystem: true, flexDirection: "row" }) static multiToggleList = (opts: DocumentOptions, docs: Doc[]) => Docs.Create.FontIconDocument({ - ...opts, data:docs, _gridGap: 0, _xMargin: 5, _yMargin: 5, layout_boxShadow: "0 0", _forceActive: true, + ...opts, data: new List(docs), _gridGap: 0, _xMargin: 5, _yMargin: 5, layout_boxShadow: "0 0", _forceActive: true, dropConverter: ScriptField.MakeScript("convertToButtons(dragData)", { dragData: DragManager.DocumentDragData.name }), _lockedPosition: true, isSystem: true, flexDirection: "row" }) @@ -806,7 +808,7 @@ pie title Minerals in my tap water /// initializes a context menu button for the top bar context menu static setupContextMenuButton(params:Button, btnDoc?:Doc, btnContainer?:Doc) { const reqdOpts:DocumentOptions = { - ...OmitKeys(params, ["scripts", "funcs", "subMenu"]).omit, + ...OmitKeys(params, ["scripts", "funcs", "subMenu"]).omit as {[key:string]: string|undefined}, color: Colors.WHITE, isSystem: true, _nativeWidth: params.width ?? 30, _width: params.width ?? 30, _height: 30, _nativeHeight: 30, linearBtnWidth: params.linearBtnWidth, @@ -814,7 +816,7 @@ pie title Minerals in my tap water _dragOnlyWithinContainer: true, _lockedPosition: true, _embedContainer: btnContainer }; - const reqdFuncs:{[key:string]:any} = { + const reqdFuncs:{[key:string]:string} = { ...params.funcs, } return DocUtils.AssignScripts(DocUtils.AssignOpts(btnDoc, reqdOpts) ?? Docs.Create.FontIconDocument(reqdOpts), params.scripts, reqdFuncs); @@ -853,14 +855,14 @@ pie title Minerals in my tap water Doc.UserDoc().workspaceRecordingState = undefined; Doc.UserDoc().workspaceReplayingState = undefined; const dockedBtns = DocCast(doc[field]); - const dockBtn = (opts: DocumentOptions, scripts: {[key:string]:string|undefined}, funcs?: {[key:string]:any}) => + const dockBtn = (opts: DocumentOptions, scripts: {[key:string]:string|undefined}, funcs?: {[key:string]:string|undefined}) => DocUtils.AssignScripts(DocUtils.AssignOpts(DocListCast(dockedBtns?.data)?.find(fdoc => fdoc.title === opts.title), opts) ?? CurrentUserUtils.createToolButton(opts), scripts, funcs); const btnDescs = [// setup reactions to change the highlights on the undo/redo buttons -- would be better to encode this in the undo/redo buttons, but the undo/redo stacks are not wired up that way yet - { opts: { title: "Replicate",icon:"camera",toolTip: "Copy dashboard layout",btnType: ButtonType.ClickButton, expertMode: true}, scripts: { onClick: `snapshotDashboard()`}}, - { opts: { title: "Recordings", toolTip: "Workspace Recordings", btnType: ButtonType.DropdownList,expertMode: false, ignoreClick: true, width: 100}, funcs: {hidden: `false`, btnList:`getWorkspaceRecordings()`}, scripts: { script: `{ return replayWorkspace(value, _readOnly_); }`, onDragScript: `{ return startRecordingDrag(value); }`}}, - { opts: { title: "Stop Rec",icon: "stop", toolTip: "Stop recording", btnType: ButtonType.ClickButton, expertMode: false}, funcs: {hidden: `!isWorkspaceRecording()`}, scripts: { onClick: `stopWorkspaceRecording()`}}, + { opts: { title: "Replicate",icon:"camera",toolTip: "Copy dashboard layout",btnType: ButtonType.ClickButton, expertMode: true}, scripts: { onClick: `snapshotDashboard()`}}, + { opts: { title: "Recordings", toolTip: "Workspace Recordings", btnType: ButtonType.DropdownList,expertMode: false, ignoreClick: true, width: 100}, funcs: {hidden: `false`, btnList:`getWorkspaceRecordings()`},scripts: { script: `{ return replayWorkspace(value, _readOnly_); }`, onDragScript: `{ return startRecordingDrag(value); }`}}, + { opts: { title: "Stop Rec",icon: "stop", toolTip: "Stop recording", btnType: ButtonType.ClickButton, expertMode: false}, funcs: {hidden: `!isWorkspaceRecording()`}, scripts: { onClick: `stopWorkspaceRecording()`}}, { opts: { title: "Play", icon: "play", toolTip: "Play recording", btnType: ButtonType.ClickButton, expertMode: false}, funcs: {hidden: `isWorkspaceReplaying() !== "${mediaState.Paused}"`}, scripts: { onClick: `resumeWorkspaceReplaying(getCurrentRecording())`}}, { opts: { title: "Pause", icon: "pause",toolTip: "Pause playback", btnType: ButtonType.ClickButton, expertMode: false}, funcs: {hidden: `isWorkspaceReplaying() !== "${mediaState.Playing}"`}, scripts: { onClick: `pauseWorkspaceReplaying(getCurrentRecording())`}}, { opts: { title: "Stop", icon: "stop", toolTip: "Stop playback", btnType: ButtonType.ClickButton, expertMode: false}, funcs: {hidden: `isWorkspaceReplaying() !== "${mediaState.Paused}"`}, scripts: { onClick: `stopWorkspaceReplaying(getCurrentRecording())`}}, @@ -1002,20 +1004,20 @@ pie title Minerals in my tap water return doc; } static setupFieldInfos(doc:Doc, field="fieldInfos") { - const fieldInfoOpts = { title: "Field Infos", isSystem: true}; // bcz: all possible document options have associated field infos which are stored onn the FieldInfos document **except for title and system which are used as part of the definition of the fieldInfos object - const infos = DocUtils.AssignDocField(doc, field, opts => Doc.assign(new Doc(), opts as any), fieldInfoOpts); + const fieldInfoOpts = { title: "Field Infos", isSystem: true}; // bcz: all possible document options have associated field infos which are stored on the FieldInfos document **except for title and system which are used as part of the definition of the fieldInfos object + const infos = DocUtils.AssignDocField(doc, field, opts => Doc.assign(new Doc(), opts as {[key:string]: FieldType}), fieldInfoOpts); const entries = Object.entries(new DocumentOptions()); entries.forEach(pair => { if (!Array.from(Object.keys(fieldInfoOpts)).includes(pair[0])) { const options = pair[1] as FInfo; - const opts:DocumentOptions = { isSystem: true, title: pair[0], ...OmitKeys(options, ["values"]).omit, fieldIsLayout: pair[0].startsWith("_")}; + const opts:DocumentOptions = { isSystem: true, title: pair[0], ...OmitKeys(options, ["values"]).omit}; switch (options.fieldType) { - case FInfoFieldType.boolean: opts.fieldValues = new List(options.values as any); break; - case FInfoFieldType.number: opts.fieldValues = new List(options.values as any); break; - case FInfoFieldType.Doc: opts.fieldValues = new List(options.values as any); break; - default: opts.fieldValues = new List(options.values as any); break;// string, pointerEvents, dimUnit, dropActionType + case FInfoFieldType.boolean: opts.fieldValues = new List(options.values as boolean[]); break; + case FInfoFieldType.number: opts.fieldValues = new List(options.values as number[]); break; + case FInfoFieldType.Doc: opts.fieldValues = new List(options.values as Doc[]); break; + default: opts.fieldValues = new List(options.values); break;// string, pointerEvents, dimUnit, dropActionType } - DocUtils.AssignDocField(infos, pair[0], docOpts => Doc.assign(new Doc(), OmitKeys(docOpts,["values"]).omit), opts); + DocUtils.AssignDocField(infos, pair[0], docOpts => Doc.assign(new Doc(), OmitKeys(docOpts,["values"]).omit as {[key:string]: FieldType}), opts); } }); } @@ -1023,10 +1025,10 @@ pie title Minerals in my tap water public static async loadCurrentUser() { return rp.get(ClientUtils.prepend("/getCurrentUser")).then(async response => { if (response) { - const result: { version: string, userDocumentId: string, sharingDocumentId: string, linkDatabaseId: string, email: string, cacheDocumentIds: string, resolvedPorts: string } = JSON.parse(response); + const result: { version: string, userDocumentId: string, sharingDocumentId: string, linkDatabaseId: string, email: string, cacheDocumentIds: string, resolvedPorts: {server: number, socket: number} } = JSON.parse(response); runInAction(() => { SnappingManager.SetServerVersion(result.version); }); ClientUtils.SetCurrentUserEmail(result.email); - resolvedPorts = result.resolvedPorts as any; + resolvedPorts = result.resolvedPorts; DocServer.init(window.location.protocol, window.location.hostname, resolvedPorts?.socket, result.email); if (result.cacheDocumentIds) { diff --git a/src/client/util/DictationManager.ts b/src/client/util/DictationManager.ts index bc9fe813f..16a0df120 100644 --- a/src/client/util/DictationManager.ts +++ b/src/client/util/DictationManager.ts @@ -1,7 +1,5 @@ /* eslint-disable no-use-before-define */ import * as interpreter from 'words-to-numbers'; -// @ts-ignore bcz: how are you supposed to include these definitions since dom-speech-recognition isn't a module? -import type {} from '@types/dom-speech-recognition'; import { ClientUtils } from '../../ClientUtils'; import { Doc, Opt } from '../../fields/Doc'; import { DocData } from '../../fields/DocSymbols'; @@ -33,19 +31,24 @@ import { UndoManager } from './UndoManager'; * In addition to compile-time default commands, you can invoke DictationManager.Commands.Register(Independent|Dependent) * to add new commands as classes or components are constructed. */ + +// eslint-disable-next-line @typescript-eslint/no-namespace export namespace DictationManager { /** * Some type maneuvering to access Webkit's built-in * speech recognizer. */ + + // eslint-disable-next-line @typescript-eslint/no-namespace namespace CORE { export interface IWindow extends Window { - webkitSpeechRecognition: any; + webkitSpeechRecognition: { new (): SpeechRecognition }; } } - const { webkitSpeechRecognition }: CORE.IWindow = window as any as CORE.IWindow; + const { webkitSpeechRecognition }: CORE.IWindow = window as unknown as CORE.IWindow; export const placeholder = 'Listening...'; + // eslint-disable-next-line @typescript-eslint/no-namespace export namespace Controls { export const Infringed = 'unable to process: dictation manager still involved in previous session'; const browser = (() => { @@ -74,7 +77,7 @@ export namespace DictationManager { // eslint-disable-next-line new-cap const recognizer: Opt = webkitSpeechRecognition ? new webkitSpeechRecognition() : undefined; - export type InterimResultHandler = (results: string) => any; + export type InterimResultHandler = (results: string) => void; export type ContinuityArgs = { indefinite: boolean } | false; export type DelimiterArgs = { inter: string; intra: string }; export type ListeningUIStatus = { interim: boolean } | false; @@ -117,11 +120,11 @@ export namespace DictationManager { } options?.tryExecute && (await DictationManager.Commands.execute(results)); } - } catch (e: any) { + } catch (e) { console.log(e); if (overlay) { DictationOverlay.Instance.isListening = false; - DictationOverlay.Instance.dictatedPhrase = results = `dictation error: ${'error' in e ? e.error : 'unknown error'}`; + DictationOverlay.Instance.dictatedPhrase = results = `dictation error: ${(e as { error: string }).error || 'unknown error'}`; DictationOverlay.Instance.dictationSuccess = false; } } finally { @@ -156,11 +159,11 @@ export namespace DictationManager { recognizer.start(); return new Promise(resolve => { - recognizer.onerror = (e: any) => { + recognizer.onerror = e => { // e is SpeechRecognitionError but where is that defined? if (!(indefinite && e.error === 'no-speech')) { recognizer.stop(); - resolve(e); + resolve(e.message); } }; @@ -227,13 +230,14 @@ export namespace DictationManager { }; } + // eslint-disable-next-line @typescript-eslint/no-namespace export namespace Commands { export const dictationFadeDuration = 2000; - export type IndependentAction = (target: DocumentView) => any | Promise; + export type IndependentAction = (target: DocumentView) => void | Promise; export type IndependentEntry = { action: IndependentAction; restrictTo?: DocumentType[] }; - export type DependentAction = (target: DocumentView, matches: RegExpExecArray) => any | Promise; + export type DependentAction = (target: DocumentView, matches: RegExpExecArray) => void | Promise; export type DependentEntry = { expression: RegExp; action: DependentAction; restrictTo?: DocumentType[] }; export const RegisterIndependent = (key: string, value: IndependentEntry) => Independent.set(key, value); @@ -295,7 +299,6 @@ export namespace DictationManager { [DocumentType.COL, listSpec(Doc)], [DocumentType.AUDIO, AudioField], [DocumentType.IMG, ImageField], - [DocumentType.IMPORT, listSpec(Doc)], [DocumentType.RTF, 'string'], ]); @@ -397,8 +400,8 @@ export namespace DictationManager { ]; } export function recordAudioAnnotation(dataDoc: Doc, field: string, onRecording?: (stop: () => void) => void, onEnd?: () => void) { - let gumStream: any; - let recorder: any; + let gumStream: MediaStream | undefined; + let recorder: MediaRecorder | undefined; navigator.mediaDevices.getUserMedia({ audio: true }).then(stream => { let audioTextAnnos = Cast(dataDoc[field + '_audioAnnotations_text'], listSpec('string'), null); if (audioTextAnnos) audioTextAnnos.push(''); @@ -415,8 +418,12 @@ export namespace DictationManager { gumStream = stream; recorder = new MediaRecorder(stream); - recorder.ondataavailable = async (e: any) => { - const [{ result }] = await Networking.UploadFilesToServer({ file: e.data }); + recorder.ondataavailable = async (e: BlobEvent) => { + const file: Blob & { name?: string; lastModified?: number; webkitRelativePath?: string } = e.data; + file.name = ''; + file.lastModified = 0; + file.webkitRelativePath = ''; + const [{ result }] = await Networking.UploadFilesToServer({ file: file as Blob & { name: string; lastModified: number; webkitRelativePath: string } }); if (!(result instanceof Error)) { const audioField = new AudioField(result.accessPaths.agnostic.client); const audioAnnos = Cast(dataDoc[field + '_audioAnnotations'], listSpec(AudioField), null); @@ -426,10 +433,10 @@ export namespace DictationManager { }; recorder.start(); const stopFunc = () => { - recorder.stop(); + recorder?.stop(); DictationManager.Controls.stop(/* false */); dataDoc.audioAnnoState = AudioAnnoState.stopped; - gumStream.getAudioTracks()[0].stop(); + gumStream?.getAudioTracks()[0].stop(); }; if (onRecording) onRecording(stopFunc); else setTimeout(stopFunc, 5000); diff --git a/src/client/util/DocumentManager.ts b/src/client/util/DocumentManager.ts index e41546d09..b12bf4390 100644 --- a/src/client/util/DocumentManager.ts +++ b/src/client/util/DocumentManager.ts @@ -50,22 +50,19 @@ export class DocumentManager { DocumentView.getLightboxDocumentView = this.getLightboxDocumentView; observe(Doc.CurrentlyLoading, change => { // watch CurrentlyLoading-- when something is loaded, it's removed from the list and we have to update its icon if it were iconified since LoadingBox icons are different than the media they become - switch (change.type as any) { + switch (change.type) { case 'update': break; - case 'remove': - // DocumentManager.Instance.getAllDocumentViews(change as any).forEach(dv => StrCast(dv.Document.layout_fieldKey) === 'layout_icon' && dv.iconify(() => dv.iconify())); - break; case 'splice': - (change as any).removed.forEach((doc: Doc) => DocumentManager.Instance.getAllDocumentViews(doc).forEach(dv => StrCast(dv.Document.layout_fieldKey) === 'layout_icon' && dv.iconify(() => dv.iconify()))); + change.removed.forEach((doc: Doc) => DocumentManager.Instance.getAllDocumentViews(doc).forEach(dv => StrCast(dv.Document.layout_fieldKey) === 'layout_icon' && dv.iconify(() => dv.iconify()))); break; default: } }); } - private _viewRenderedCbs: { doc: Doc; func: (dv: DocumentView) => any }[] = []; - public AddViewRenderedCb = (doc: Opt, func: (dv: DocumentView) => any) => { + private _viewRenderedCbs: { doc: Doc; func: (dv: DocumentView) => unknown }[] = []; + public AddViewRenderedCb = (doc: Opt, func: (dv: DocumentView) => unknown) => { if (doc) { const dv = DocumentView.LightboxDoc() ? this.getLightboxDocumentView(doc) : this.getDocumentView(doc); this._viewRenderedCbs.push({ doc, func }); @@ -74,6 +71,7 @@ export class DocumentManager { return true; } } else { + // eslint-disable-next-line @typescript-eslint/no-explicit-any func(undefined as any); } return false; @@ -341,18 +339,21 @@ export class DocumentManager { // if there's an options.effect, it will be handled from linkFollowHighlight. We delay the start of // the highlight so that the target document can be somewhat centered so that the effect/highlight will be seen // bcz: should this delay be an options parameter? - setTimeout(() => { - Doc.linkFollowHighlight(viewSpec ? [docView.Document, viewSpec] : docView.Document, undefined, options.effect); - if (options.zoomTextSelections && Doc.IsUnhighlightTimerSet() && contextView && targetDoc.text_html) { - // if the docView is a text anchor, the contextView is the PDF/Web/Text doc - contextView.setTextHtmlOverlay(StrCast(targetDoc.text_html), options.effect); - DocumentManager._overlayViews.add(contextView); - } - Doc.AddUnHighlightWatcher(() => { - docView.Document[Animation] = undefined; - DocumentManager.removeOverlayViews(); - }); - }, (options.zoomTime ?? 0) * 0.5); + setTimeout( + () => { + Doc.linkFollowHighlight(viewSpec ? [docView.Document, viewSpec] : docView.Document, undefined, options.effect); + if (options.zoomTextSelections && Doc.IsUnhighlightTimerSet() && contextView && targetDoc.text_html) { + // if the docView is a text anchor, the contextView is the PDF/Web/Text doc + contextView.setTextHtmlOverlay(StrCast(targetDoc.text_html), options.effect); + DocumentManager._overlayViews.add(contextView); + } + Doc.AddUnHighlightWatcher(() => { + docView.Document[Animation] = undefined; + DocumentManager.removeOverlayViews(); + }); + }, + (options.zoomTime ?? 0) * 0.5 + ); if (options.playMedia) docView.ComponentView?.playFrom?.(NumCast(docView.Document._layout_currentTimecode)); if (options.playAudio) DocumentManager.playAudioAnno(docView.Document); if (options.toggleTarget && (!options.didMove || docView.Document.hidden)) docView.Document.hidden = !docView.Document.hidden; diff --git a/src/client/util/DragManager.ts b/src/client/util/DragManager.ts index fda505420..c237a75de 100644 --- a/src/client/util/DragManager.ts +++ b/src/client/util/DragManager.ts @@ -1,4 +1,3 @@ -/* eslint-disable import/no-mutable-exports */ /* eslint-disable no-use-before-define */ /** * The DragManager handles all dragging interactions that occur entirely within Dash (as opposed to external drag operations from the file system, etc) @@ -23,13 +22,14 @@ import { DocData } from '../../fields/DocSymbols'; import { List } from '../../fields/List'; import { PrefetchProxy } from '../../fields/Proxy'; import { ScriptField } from '../../fields/ScriptField'; -import { ScriptCast } from '../../fields/Types'; +import { ScriptCast, StrCast } from '../../fields/Types'; import { Docs } from '../documents/Documents'; import { DocumentView } from '../views/nodes/DocumentView'; import { dropActionType } from './DropActionTypes'; import { SnappingManager } from './SnappingManager'; import { UndoManager } from './UndoManager'; +// eslint-disable-next-line @typescript-eslint/no-var-requires const { contextMenuZindex } = require('../views/global/globalCssVariables.module.scss'); // prettier-ignore /** @@ -70,6 +70,7 @@ export function SetupDrag(_reference: React.RefObject, docFunc: () return onItemDown; } +// eslint-disable-next-line @typescript-eslint/no-namespace export namespace DragManager { export const dragClassName = 'collectionFreeFormDocumentView-container'; let dragDiv: HTMLDivElement; @@ -78,7 +79,7 @@ export namespace DragManager { export let CompleteWindowDrag: Opt<(aborted: boolean) => void>; export let AbortDrag: () => void = emptyFunction; export const docsBeingDragged: Doc[] = observable([]); - export let DocDragData: DocumentDragData | undefined; + export let DraggedDocs: Doc[] | undefined; export function Root() { const root = document.getElementById('root'); @@ -118,7 +119,7 @@ export namespace DragManager { // event called when the drag operation has completed (aborted or completed a drop) -- this will be after any drop event has been generated export class DragCompleteEvent { - constructor(aborted: boolean, dragData: { [id: string]: any }) { + constructor(aborted: boolean, dragData: DocumentDragData | AnchorAnnoDragData | LinkDragData | ColumnDragData) { this.aborted = aborted; this.docDragData = dragData instanceof DocumentDragData ? dragData : undefined; this.annoDragData = dragData instanceof AnchorAnnoDragData ? dragData : undefined; @@ -167,6 +168,9 @@ export namespace DragManager { linkSourceGetAnchor: () => Doc; linkSourceDoc?: Doc; linkDragView: DocumentView; + get canEmbed() { + return true; + } } export class ColumnDragData { // constructor(colKey: SchemaHeaderField) { @@ -177,6 +181,9 @@ export namespace DragManager { this.colIndex = colIndex; } colIndex: number; + get canEmbed() { + return true; + } } // used by PDFs,Text,Image,Video,Web to conditionally (if the drop completes) create a text annotation when dragging the annotate button from the AnchorMenu when a text/region selection has been made. // this is pretty clunky and should be rethought out using linkDrag or DocumentDrag @@ -191,6 +198,9 @@ export namespace DragManager { offset: number[]; dropAction?: dropActionType; userDropAction?: dropActionType; + get canEmbed() { + return true; + } } const defaultPreDropFunc = (e: Event, de: DragManager.DropEvent, targetAction: dropActionType) => { @@ -208,7 +218,7 @@ export namespace DragManager { const handler = (e: Event) => dropFunc(e, (e as CustomEvent).detail); const preDropHandler = (e: Event) => { const de = (e as CustomEvent).detail; - (preDropFunc ?? defaultPreDropFunc)(e, de, doc.dropAction as any as dropActionType); + (preDropFunc ?? defaultPreDropFunc)(e, de, StrCast(doc.dropAction) as dropActionType); }; element.addEventListener('dashOnDrop', handler); element.addEventListener('dashPreDrop', preDropHandler); @@ -220,8 +230,8 @@ export namespace DragManager { } // drag a document and drop it (or make an embed/copy on drop) - export function StartDocumentDrag(eles: HTMLElement[], dragData: DocumentDragData, downX: number, downY: number, options?: DragOptions, onDropCompleted?: (e?: DragCompleteEvent) => any) { - const addAudioTag = (dropDoc: any) => { + export function StartDocumentDrag(eles: HTMLElement[], dragData: DocumentDragData, downX: number, downY: number, options?: DragOptions, onDropCompleted?: (e?: DragCompleteEvent) => unknown) { + const addAudioTag = (dropDoc: Doc) => { dropDoc && !dropDoc.author_date && (dropDoc.author_date = new DateField()); dropDoc instanceof Doc && CreateLinkToActiveAudio(() => dropDoc); return dropDoc; @@ -236,7 +246,7 @@ export namespace DragManager { await Promise.all( dragData.draggedDocuments.map(async d => !dragData.isDocDecorationMove && !dragData.userDropAction && ScriptCast(d.onDragStart) - ? addAudioTag(ScriptCast(d.onDragStart).script.run({ this: d }).result) + ? addAudioTag(ScriptCast(d.onDragStart).script.run({ this: d }).result as Doc) : docDragData.dropAction === dropActionType.embed ? Doc.BestEmbedding(d) : docDragData.dropAction === dropActionType.add @@ -249,7 +259,7 @@ export namespace DragManager { ) ) ).filter(d => d); - ![dropActionType.same, dropActionType.proto].includes(docDragData.dropAction as any) && + ![dropActionType.same, dropActionType.proto].includes(StrCast(docDragData.dropAction) as dropActionType) && docDragData.droppedDocuments // .filter(drop => !drop.dragOnlyWithinContainer || ['embed', 'copy'].includes(docDragData.dropAction as any)) .forEach((drop: Doc, i: number) => { @@ -376,9 +386,18 @@ export namespace DragManager { options?.dragComplete?.(complete); endDrag?.(); } - export function StartDrag(elesIn: HTMLElement[], dragData: { [id: string]: any }, downX: number, downY: number, options?: DragOptions, finishDrag?: (dropData: DragCompleteEvent) => void, dragUndoName?: string) { - if (dragData.dropAction === 'none' || SnappingManager.ExploreMode) return; - DocDragData = dragData as DocumentDragData; + export function StartDrag( + elesIn: HTMLElement[], + dragData: DocumentDragData | LinkDragData | ColumnDragData | AnchorAnnoDragData, + downX: number, + downY: number, + options?: DragOptions, + finishDrag?: (dropData: DragCompleteEvent) => void, + dragUndoName?: string + ) { + if (SnappingManager.ExploreMode) return; + const docDragData = dragData instanceof DocumentDragData ? dragData : undefined; + DraggedDocs = docDragData?.draggedDocuments; const batch = UndoManager.StartBatch(dragUndoName ?? 'document drag'); const eles = elesIn.filter(e => e); SnappingManager.SetCanEmbed(dragData.canEmbed || false); @@ -437,8 +456,9 @@ export namespace DragManager { next && children.push(...Array.from(next.children)); if (next) { ['marker-start', 'marker-mid', 'marker-end'].forEach(field => { - if (next.localName.startsWith('path') && (next.attributes as any)[field]) { - next.setAttribute(field, (next.attributes as any)[field].value.replace('#', '#X')); + if (next.localName.startsWith('path')) { + const item = next.attributes.getNamedItem(field); + item && next.setAttribute(field, item.value.replace('#', '#X')); } }); if (next.localName.startsWith('marker')) { @@ -495,7 +515,7 @@ export namespace DragManager { .map((pb, i) => pb.getContext('2d')!.drawImage(pdfBoxSrc[i], 0, 0)); } [dragElement, ...Array.from(dragElement.getElementsByTagName('*'))] - .map(dele => (dele as any).style) + .map(dele => (dele as HTMLElement)?.style) .forEach(style => { style && (style.pointerEvents = 'none'); }); @@ -536,34 +556,35 @@ export namespace DragManager { const yFromBottom = elesCont.bottom - downY; let scrollAwaiter: Opt; - let startWindowDragTimer: any; + let startWindowDragTimer: NodeJS.Timeout | undefined; const moveHandler = (e: PointerEvent) => { e.preventDefault(); // required or dragging text menu link item ends up dragging the link button as native drag/drop - if (dragData instanceof DocumentDragData) { - dragData.userDropAction = e.ctrlKey && e.altKey ? dropActionType.copy : e.shiftKey ? dropActionType.move : e.ctrlKey ? dropActionType.embed : dragData.defaultDropAction; - } - if (['lm_tab', 'lm_title_wrap', 'lm_tabs', 'lm_header'].includes(typeof (e.target as any).className === 'string' ? (e.target as any)?.className : '') && dragData.draggedDocuments.length === 1) { - if (!startWindowDragTimer) { - startWindowDragTimer = setTimeout(async () => { - startWindowDragTimer = undefined; - dragData.dropAction = dragData.userDropAction || 'same'; - AbortDrag(); - await finishDrag?.(new DragCompleteEvent(true, dragData)); - DragManager.StartWindowDrag?.(e, dragData.droppedDocuments, aborted => { - if (!aborted && (dragData.dropAction === 'move' || dragData.dropAction === 'same')) { - dragData.removeDocument?.(dragData.draggedDocuments[0]); - } - }); - }, 500); + if (docDragData) { + docDragData.userDropAction = e.ctrlKey && e.altKey ? dropActionType.copy : e.shiftKey ? dropActionType.move : e.ctrlKey ? dropActionType.embed : docDragData.defaultDropAction; + const targClassName = e.target instanceof HTMLElement && typeof e.target.className === 'string' ? e.target.className : ''; + if (['lm_tab', 'lm_title_wrap', 'lm_tabs', 'lm_header'].includes(targClassName) && docDragData.draggedDocuments.length === 1) { + if (!startWindowDragTimer) { + startWindowDragTimer = setTimeout(async () => { + startWindowDragTimer = undefined; + docDragData.dropAction = docDragData.userDropAction || dropActionType.same; + AbortDrag(); + await finishDrag?.(new DragCompleteEvent(true, docDragData)); + DragManager.StartWindowDrag?.(e, docDragData.droppedDocuments, aborted => { + if (!aborted && (docDragData?.dropAction === 'move' || docDragData?.dropAction === 'same')) { + docDragData.removeDocument?.(docDragData?.draggedDocuments[0]); + } + }); + }, 500); + } + } else { + clearTimeout(startWindowDragTimer); + startWindowDragTimer = undefined; } - } else { - clearTimeout(startWindowDragTimer); - startWindowDragTimer = undefined; } const target = document.elementFromPoint(e.x, e.y); - if (target && !Doc.UserDoc()._noAutoscroll && !options?.noAutoscroll && !dragData.draggedDocuments?.some((d: any) => d._freeform_noAutoPan)) { + if (target && !Doc.UserDoc()._noAutoscroll && !options?.noAutoscroll && !(docDragData?.draggedDocuments as Doc[])?.some(d => d._freeform_noAutoPan)) { const autoScrollHandler = () => { target.dispatchEvent( new CustomEvent('dashDragMovePause', { @@ -587,7 +608,7 @@ export namespace DragManager { screenX: e.screenX, screenY: e.screenY, detail: e.detail, - view: e.view ? e.view : (new Window() as any), + view: { ...(e.view ?? new Window()), styleMedia: { type: '', matchMedium: () => false } }, // bcz: Ugh.. this looks wrong nativeEvent: new DragEvent('dashDragMovePause'), currentTarget: target, target: target, @@ -596,10 +617,10 @@ export namespace DragManager { defaultPrevented: true, eventPhase: e.eventPhase, isTrusted: true, - preventDefault: () => 'not implemented for this event' && false, - isDefaultPrevented: () => 'not implemented for this event' && false, - stopPropagation: () => 'not implemented for this event' && false, - isPropagationStopped: () => 'not implemented for this event' && false, + preventDefault: () => 'not implemented for this event', + isDefaultPrevented: () => false, + stopPropagation: () => 'not implemented for this event', + isPropagationStopped: () => false, persist: emptyFunction, timeStamp: e.timeStamp, type: 'dashDragMovePause', diff --git a/src/client/util/DropConverter.ts b/src/client/util/DropConverter.ts index 0314af06b..eb2011b77 100644 --- a/src/client/util/DropConverter.ts +++ b/src/client/util/DropConverter.ts @@ -26,9 +26,10 @@ function makeTemplate(doc: Doc, first: boolean = true): boolean { if (layoutDoc.layout instanceof Doc) { return true; // its already a template } - const layout = StrCast(layoutDoc.layout).match(/fieldKey={'[^']*'}/)![0]; - const fieldKey = layout.replace("fieldKey={'", '').replace(/'}$/, ''); - const docs = DocListCast(layoutDoc[fieldKey]); + const layout = StrCast(layoutDoc.layout).match(/fieldKey={'[^']*'}/)?.[0]; + const fieldKey = layout?.replace("fieldKey={'", '').replace(/'}$/, ''); + const docData = fieldKey ? layoutDoc[fieldKey] : undefined; + const docs = DocListCast(docData); let isTemplate = false; docs.forEach(d => { if (!StrCast(d.title).startsWith('-')) { @@ -40,7 +41,7 @@ function makeTemplate(doc: Doc, first: boolean = true): boolean { if (first && !docs.length) { // bcz: feels hacky : if the root level document has items, it's not a field template isTemplate = Doc.MakeMetadataFieldTemplate(doc, layoutDoc[DocData], true) || isTemplate; - } else if (layoutDoc[fieldKey] instanceof RichTextField || layoutDoc[fieldKey] instanceof ImageField) { + } else if (docData instanceof RichTextField || docData instanceof ImageField) { if (!StrCast(layoutDoc.title).startsWith('-')) { isTemplate = Doc.MakeMetadataFieldTemplate(layoutDoc, layoutDoc[DocData], true); } @@ -110,8 +111,8 @@ export function convertDropDataToButtons(data: DragManager.DocumentDragData) { } ScriptingGlobals.add( // eslint-disable-next-line prefer-arrow-callback - function convertToButtons(dragData: any) { - convertDropDataToButtons(dragData as DragManager.DocumentDragData); + function convertToButtons(dragData: DragManager.DocumentDragData) { + convertDropDataToButtons(dragData); }, 'converts the dropped data to buttons', '(dragData: any)' diff --git a/src/client/util/GroupManager.tsx b/src/client/util/GroupManager.tsx index 5701a22c0..9d0817a06 100644 --- a/src/client/util/GroupManager.tsx +++ b/src/client/util/GroupManager.tsx @@ -1,8 +1,6 @@ -/* eslint-disable jsx-a11y/no-static-element-interactions */ -/* eslint-disable jsx-a11y/click-events-have-key-events */ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { Button, IconButton, Size, Type } from 'browndash-components'; -import { action, computed, makeObservable, observable } from 'mobx'; +import { action, computed, makeObservable, observable, runInAction } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; import Select from 'react-select'; @@ -31,7 +29,7 @@ export interface UserOptions { } @observer -export class GroupManager extends ObservableReactComponent<{}> { +export class GroupManager extends ObservableReactComponent { // eslint-disable-next-line no-use-before-define static Instance: GroupManager; @observable isOpen: boolean = false; // whether the GroupManager is to be displayed or not. @@ -44,7 +42,7 @@ export class GroupManager extends ObservableReactComponent<{}> { @observable private buttonColour: '#979797' | 'black' = '#979797'; @observable private groupSort: 'ascending' | 'descending' | 'none' = 'none'; - constructor(props: Readonly<{}>) { + constructor(props: Readonly) { super(props); makeObservable(this); GroupManager.Instance = this; @@ -226,15 +224,6 @@ export class GroupManager extends ObservableReactComponent<{}> { } } - /** - * Handles changes in the users selected in the "Select users" dropdown. - * @param selectedOptions - */ - @action - handleChange = (selectedOptions: any) => { - this.selectedUsers = selectedOptions as UserOptions[]; - }; - /** * Creates the group when the enter key has been pressed (when in the input). * @param e @@ -309,7 +298,6 @@ export class GroupManager extends ObservableReactComponent<{}> { { className="select-users" isMulti options={this.options} - onChange={this.handleChange} + onChange={selectedOptions => { + runInAction(() => (this.selectedUsers = Array.from(selectedOptions))); + }} placeholder="Select users" value={this.selectedUsers} closeMenuOnSelect={false} diff --git a/src/client/util/GroupMemberView.tsx b/src/client/util/GroupMemberView.tsx index da9e1aa28..88d73d742 100644 --- a/src/client/util/GroupMemberView.tsx +++ b/src/client/util/GroupMemberView.tsx @@ -1,5 +1,3 @@ -/* eslint-disable jsx-a11y/no-static-element-interactions */ -/* eslint-disable jsx-a11y/click-events-have-key-events */ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { Button, IconButton, Size, Type } from 'browndash-components'; import { action, observable } from 'mobx'; diff --git a/src/client/util/History.ts b/src/client/util/History.ts index 52d0223d5..067c28c6b 100644 --- a/src/client/util/History.ts +++ b/src/client/util/History.ts @@ -10,6 +10,7 @@ import { OmitKeys, ClientUtils } from '../../ClientUtils'; import { DocServer } from '../DocServer'; import { DashboardView } from '../views/DashboardView'; +// eslint-disable-next-line @typescript-eslint/no-namespace export namespace HistoryUtil { export interface DocInitializerList { [key: string]: string | number; @@ -85,7 +86,7 @@ export namespace HistoryUtil { const parsers: { [type: string]: (pathname: string[], opts: qs.ParsedQuery) => ParsedUrl | undefined } = {}; const stringifiers: { [type: string]: (state: ParsedUrl) => string } = {}; - type ParserValue = true | 'none' | 'json' | ((value: string) => any); + type ParserValue = true | 'none' | 'json' | ((value: string) => string | null | (string | null)[]); type Parser = { [key: string]: ParserValue; @@ -106,7 +107,7 @@ export namespace HistoryUtil { return value; } parsers[type] = (pathname, opts) => { - const current: any = { type }; + const current: DocUrl & { [key: string]: null | (string | null)[] | string } = { type: 'doc', docId: '' }; for (const required in requiredFields) { if (!(required in opts)) { return undefined; @@ -148,7 +149,7 @@ export namespace HistoryUtil { path = customStringifier(state, path); } const queryObj = OmitKeys(state, keys).extract; - const query: any = {}; + const query: { [key: string]: string | null } = {}; Object.keys(queryObj).forEach(key => { query[key] = queryObj[key] === null ? null : JSON.stringify(queryObj[key]); }); diff --git a/src/client/util/Import & Export/ImageUtils.ts b/src/client/util/Import & Export/ImageUtils.ts index 8d4eefa7e..266e05f08 100644 --- a/src/client/util/Import & Export/ImageUtils.ts +++ b/src/client/util/Import & Export/ImageUtils.ts @@ -1,3 +1,4 @@ +/* eslint-disable @typescript-eslint/no-namespace */ import { ClientUtils } from '../../../ClientUtils'; import { Doc } from '../../../fields/Doc'; import { DocData } from '../../../fields/DocSymbols'; diff --git a/src/client/util/Import & Export/ImportMetadataEntry.tsx b/src/client/util/Import & Export/ImportMetadataEntry.tsx index db1e3d6cd..63dedf820 100644 --- a/src/client/util/Import & Export/ImportMetadataEntry.tsx +++ b/src/client/util/Import & Export/ImportMetadataEntry.tsx @@ -1,5 +1,3 @@ -/* eslint-disable jsx-a11y/no-static-element-interactions */ -/* eslint-disable jsx-a11y/click-events-have-key-events */ /* eslint-disable no-use-before-define */ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { action, computed } from 'mobx'; diff --git a/src/client/util/InteractionUtils.tsx b/src/client/util/InteractionUtils.tsx index a07550e09..f3ede596d 100644 --- a/src/client/util/InteractionUtils.tsx +++ b/src/client/util/InteractionUtils.tsx @@ -1,8 +1,10 @@ +import { Property } from 'csstype'; import * as React from 'react'; import { Utils } from '../../Utils'; import { Gestures } from '../../pen-gestures/GestureTypes'; import './InteractionUtils.scss'; +// eslint-disable-next-line @typescript-eslint/no-namespace export namespace InteractionUtils { export const MOUSETYPE = 'mouse'; export const TOUCHTYPE = 'touch'; @@ -11,7 +13,7 @@ export namespace InteractionUtils { const ERASER_BUTTON = 5; - export function makePolygon(shape: string, points: { X: number; Y: number }[]) { + export function makePolygon(shape: Gestures, points: { X: number; Y: number }[]) { // if arrow/line/circle, the two end points should be the starting and the ending point let left = points[0].X; let top = points[0].Y; @@ -19,7 +21,7 @@ export namespace InteractionUtils { let bottom = points[1].Y; if (points.length > 1 && points[points.length - 1].X === points[0].X && points[points.length - 1].Y + 1 === points[0].Y) { // pointer is up (first and last points are the same) - if (![Gestures.Arrow, Gestures.Line, Gestures.Circle].includes(shape as any as Gestures)) { + if (![Gestures.Arrow, Gestures.Line, Gestures.Circle].includes(shape)) { // otherwise take max and min const xs = points.map(p => p.X); const ys = points.map(p => p.Y); @@ -98,8 +100,8 @@ export namespace InteractionUtils { color: string, width: number, strokeWidth: number, - lineJoin: string, - strokeLineCap: string, + lineJoin: Property.StrokeLinejoin, + strokeLineCap: Property.StrokeLinecap, bezier: string, fill: string, arrowStart: string, @@ -108,8 +110,8 @@ export namespace InteractionUtils { dash: string | undefined, scalexIn: number, scaleyIn: number, - shape: string, - pevents: string, + shape: Gestures, + pevents: Property.PointerEvents, opacity: number, nodefs: boolean, downHdlr?: (e: React.PointerEvent) => void, @@ -154,7 +156,7 @@ export namespace InteractionUtils { @@ -184,10 +186,10 @@ export namespace InteractionUtils { filter: mask ? `url(#mask${defGuid})` : undefined, opacity: 1.0, // opacity: strokeWidth !== width ? 0.5 : undefined, - pointerEvents: (pevents as any) === 'all' ? 'visiblepainted' : (pevents as any), + pointerEvents: pevents === 'all' ? 'visiblePainted' : pevents, stroke: color ?? 'rgb(0, 0, 0)', strokeWidth, - strokeLinecap: strokeLineCap as any, + strokeLinecap: strokeLineCap, strokeDasharray: dashArray, transition: 'inherit', }} diff --git a/src/client/util/LinkFollower.ts b/src/client/util/LinkFollower.ts index 9a0edcfec..0a3a0ba49 100644 --- a/src/client/util/LinkFollower.ts +++ b/src/client/util/LinkFollower.ts @@ -50,7 +50,7 @@ export class LinkFollower { const backLinks = linkDocs.filter(l => isAnchor(sourceDoc, l.link_anchor_2 as Doc)); // link docs where 'sourceDoc' is link_anchor_2 const fwdLinkWithoutTargetView = fwdLinks.find(l => !getView(DocCast(l.link_anchor_2))); const backLinkWithoutTargetView = backLinks.find(l => !getView(DocCast(l.link_anchor_1))); - const linkWithoutTargetDoc = traverseBacklink === undefined ? fwdLinkWithoutTargetView ?? backLinkWithoutTargetView : traverseBacklink ? backLinkWithoutTargetView : fwdLinkWithoutTargetView; + const linkWithoutTargetDoc = traverseBacklink === undefined ? (fwdLinkWithoutTargetView ?? backLinkWithoutTargetView) : traverseBacklink ? backLinkWithoutTargetView : fwdLinkWithoutTargetView; const linkDocList = linkWithoutTargetDoc && !sourceDoc.followAllLinks ? [linkWithoutTargetDoc] : traverseBacklink === undefined ? fwdLinks.concat(backLinks) : traverseBacklink ? backLinks : fwdLinks; const followLinks = sourceDoc.followLinkToggle || sourceDoc.followAllLinks ? linkDocList : linkDocList.slice(0, 1); let count = 0; @@ -82,7 +82,7 @@ export class LinkFollower { willZoomCentered: BoolCast(srcAnchor.followLinkZoom, false), zoomTime: NumCast(srcAnchor.followLinkTransitionTime, 500), zoomScale: Cast(srcAnchor.followLinkZoomScale, 'number', null), - easeFunc: StrCast(srcAnchor.followLinkEase, 'ease') as any, + easeFunc: StrCast(srcAnchor.followLinkEase, 'ease') as 'ease' | 'linear', openLocation: StrCast(srcAnchor.followLinkLocation, OpenWhere.lightbox) as OpenWhere, effect: srcAnchor, zoomTextSelections: BoolCast(srcAnchor.followLinkZoomText), diff --git a/src/client/util/LinkManager.ts b/src/client/util/LinkManager.ts index 56d5dce4e..e11482572 100644 --- a/src/client/util/LinkManager.ts +++ b/src/client/util/LinkManager.ts @@ -31,13 +31,13 @@ export class LinkManager { @observable public currentLink: Opt = undefined; @observable public currentLinkAnchor: Opt = undefined; public static get Instance(): LinkManager { - return Doc.UserDoc() ? LinkManager._instance ?? new LinkManager() : (undefined as any as LinkManager); + return Doc.UserDoc() ? (LinkManager._instance ?? new LinkManager()) : (undefined as unknown as LinkManager); } public static Links(doc: Doc | undefined) { return doc ? LinkManager.Instance.getAllRelatedLinks(doc) : []; } - public addLinkDB = async (linkDb: any) => { + public addLinkDB = async (linkDb: Doc) => { await Promise.all( ((await DocListCastAsync(linkDb.data)) ?? []).map(link => // makes sure link anchors are loaded to avoid incremental updates to computedFns in LinkManager @@ -95,35 +95,24 @@ export class LinkManager { const watchUserLinkDB = (userLinkDBDoc: Doc) => { const toRealField = (field: FieldType) => (field instanceof ProxyField ? field.value : field); // see List.ts. data structure is not a simple list of Docs, but a list of ProxyField/Fields if (userLinkDBDoc.data) { + // observe pushes/splices on a user link DB 'data' field (should only happen for local changes) observe( - userLinkDBDoc.data, + userLinkDBDoc.data as unknown as Doc[], change => { - // observe pushes/splices on a user link DB 'data' field (should only happen for local changes) - switch (change.type as any) { + switch (change.type) { case 'splice': - (change as any).added.forEach((link: any) => addLinkToDoc(toRealField(link))); - (change as any).removed.forEach((link: any) => remLinkFromDoc(toRealField(link))); + change.added.forEach(link => addLinkToDoc(toRealField(link))); + change.removed.forEach(link => remLinkFromDoc(toRealField(link))); break; - case 'update': // let oldValue = change.oldValue; - default: - } - }, - true - ); - observe( - userLinkDBDoc, - 'data', // obsever when a new array of links is assigned as the link DB 'data' field (should happen whenever a remote user adds/removes a link) - change => { - switch (change.type as any) { case 'update': - Promise.all([...((change.oldValue as any as Doc[]) || []), ...((change.newValue as any as Doc[]) || [])]).then(doclist => { - const oldDocs = doclist.slice(0, ((change.oldValue as any as Doc[]) || []).length); - const newDocs = doclist.slice(((change.oldValue as any as Doc[]) || []).length, doclist.length); + Promise.all([...((change.oldValue as unknown as Doc[]) || []), ...((change.newValue as unknown as Doc[]) || [])]).then(doclist => { + const oldDocs = doclist.slice(0, ((change.oldValue as unknown as Doc[]) || []).length); + const newDocs = doclist.slice(((change.oldValue as unknown as Doc[]) || []).length, doclist.length); const added = newDocs?.filter(link => !(oldDocs || []).includes(link)); const removed = oldDocs?.filter(link => !(newDocs || []).includes(link)); - added?.forEach((link: any) => addLinkToDoc(toRealField(link))); - removed?.forEach((link: any) => remLinkFromDoc(toRealField(link))); + added?.forEach(link => addLinkToDoc(toRealField(link))); + removed?.forEach(link => remLinkFromDoc(toRealField(link))); }); break; default: @@ -136,9 +125,9 @@ export class LinkManager { observe( this.userLinkDBs, change => { - switch (change.type as any) { + switch (change.type) { case 'splice': - (change as any).added.forEach(watchUserLinkDB); + change.added.forEach(watchUserLinkDB); break; case 'update': // let oldValue = change.oldValue; default: @@ -188,7 +177,7 @@ export class LinkManager { return []; } - const dirLinks = Array.from(anchor[DocData][DirectLinks]).filter(l => Doc.GetProto(anchor) === anchor[DocData] || ['1', '2'].includes(LinkManager.anchorIndex(l, anchor) as any)); + const dirLinks = Array.from(anchor[DocData][DirectLinks]).filter(l => Doc.GetProto(anchor) === anchor[DocData] || ['1', '2'].includes(LinkManager.anchorIndex(l, anchor) as '0' | '1' | '2')); const anchorRoot = DocCast(anchor.rootDocument, anchor); // template Doc fields store annotations on the topmost root of a template (not on themselves since the template layout items are only for layout) const annos = DocListCast(anchorRoot[Doc.LayoutFieldKey(anchor) + '_annotations']); return Array.from( @@ -283,7 +272,7 @@ export function UPDATE_SERVER_CACHE() { ScriptingGlobals.add( // eslint-disable-next-line prefer-arrow-callback - function links(doc: any) { + function links(doc: Doc) { return new List(LinkManager.Links(doc)); }, 'returns all the links to the document or its annotations', diff --git a/src/client/util/ProsemirrorCopy/prompt.js b/src/client/util/ProsemirrorCopy/prompt.js deleted file mode 100644 index b9068195f..000000000 --- a/src/client/util/ProsemirrorCopy/prompt.js +++ /dev/null @@ -1,179 +0,0 @@ -const prefix = "ProseMirror-prompt" - -export function openPrompt(options) { - let wrapper = document.body.appendChild(document.createElement("div")) - wrapper.className = prefix - wrapper.style.zIndex = 1000; - wrapper.style.width = 250; - wrapper.style.textAlign = "center"; - - let mouseOutside = e => { if (!wrapper.contains(e.target)) close() } - setTimeout(() => window.addEventListener("mousedown", mouseOutside), 50) - let close = () => { - window.removeEventListener("mousedown", mouseOutside) - if (wrapper.parentNode) wrapper.parentNode.removeChild(wrapper) - } - - let domFields = [] - for (let name in options.fields) domFields.push(options.fields[name].render()) - - let submitButton = document.createElement("button") - submitButton.type = "submit" - submitButton.className = prefix + "-submit" - submitButton.textContent = "OK" - let cancelButton = document.createElement("button") - cancelButton.type = "button" - cancelButton.className = prefix + "-cancel" - cancelButton.textContent = "Cancel" - cancelButton.addEventListener("click", close) - - let form = wrapper.appendChild(document.createElement("form")) - let title = document.createElement("h5") - title.style.marginBottom = 15 - title.style.marginTop = 10 - if (options.title) form.appendChild(title).textContent = options.title - domFields.forEach(field => { - form.appendChild(document.createElement("div")).appendChild(field) - }) - let b = document.createElement("div"); - b.style.marginTop = 15; - let buttons = form.appendChild(b) - // buttons.className = prefix + "-buttons" - buttons.appendChild(submitButton) - buttons.appendChild(document.createTextNode(" ")) - buttons.appendChild(cancelButton) - - let box = wrapper.getBoundingClientRect() - wrapper.style.top = options.flyout_top + "px" - wrapper.style.left = options.flyout_left + "px" - - let submit = () => { - let params = getValues(options.fields, domFields) - if (params) { - close() - options.callback(params) - } - } - - form.addEventListener("submit", e => { - e.preventDefault() - submit() - }) - - form.addEventListener("keydown", e => { - if (e.keyCode == 27) { - e.preventDefault() - close() - } else if (e.keyCode == 13 && !(e.ctrlKey || e.metaKey || e.shiftKey)) { - e.preventDefault() - submit() - } else if (e.keyCode == 9) { - window.setTimeout(() => { - if (!wrapper.contains(document.activeElement)) close() - }, 500) - } - }) - - let input = form.elements[0] - if (input) input.focus() -} - -function getValues(fields, domFields) { - let result = Object.create(null), i = 0 - for (let name in fields) { - let field = fields[name], dom = domFields[i++] - let value = field.read(dom), bad = field.validate(value) - if (bad) { - reportInvalid(dom, bad) - return null - } - result[name] = field.clean(value) - } - return result -} - -function reportInvalid(dom, message) { - // FIXME this is awful and needs a lot more work - let parent = dom.parentNode - let msg = parent.appendChild(document.createElement("div")) - msg.style.left = (dom.offsetLeft + dom.offsetWidth + 2) + "px" - msg.style.top = (dom.offsetTop - 5) + "px" - msg.className = "ProseMirror-invalid" - msg.textContent = message - setTimeout(() => parent.removeChild(msg), 1500) -} - -// ::- The type of field that `FieldPrompt` expects to be passed to it. -export class Field { - // :: (Object) - // Create a field with the given options. Options support by all - // field types are: - // - // **`value`**`: ?any` - // : The starting value for the field. - // - // **`label`**`: string` - // : The label for the field. - // - // **`required`**`: ?bool` - // : Whether the field is required. - // - // **`validate`**`: ?(any) → ?string` - // : A function to validate the given value. Should return an - // error message if it is not valid. - constructor(options) { this.options = options } - - // render:: (state: EditorState, props: Object) → dom.Node - // Render the field to the DOM. Should be implemented by all subclasses. - - // :: (dom.Node) → any - // Read the field's value from its DOM node. - read(dom) { return dom.value } - - // :: (any) → ?string - // A field-type-specific validation function. - validateType(_value) { } - - validate(value) { - if (!value && this.options.required) - return "Required field" - return this.validateType(value) || (this.options.validate && this.options.validate(value)) - } - - clean(value) { - return this.options.clean ? this.options.clean(value) : value - } -} - -// ::- A field class for single-line text fields. -export class TextField extends Field { - render() { - let input = document.createElement("input") - input.type = "text" - input.placeholder = this.options.label - input.value = this.options.value || "" - input.autocomplete = "off" - input.style.marginBottom = 4 - input.style.border = "1px solid black" - input.style.padding = "4px 4px" - return input - } -} - - -// ::- A field class for dropdown fields based on a plain `