rmorawski/standardnotes-app-web
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat(labs): super editor (#2001)

Browse Source
This commit is contained in:
Mo
2022-11-16 05:54:32 -06:00
committed by GitHub
parent f0c9f899e9
commit 59f8547a8d
89 changed files with 1021 additions and 615 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
packages/blocks-editor/src/Editor/BlocksEditor.tsx
View File

@@ -39,6 +39,7 @@ type BlocksEditorProps = {
children?: React.ReactNode;
previewLength: number;
spellcheck?: boolean;
ignoreFirstChange?: boolean;
};
export const BlocksEditor: FunctionComponent<BlocksEditorProps> = ({
@@ -47,11 +48,12 @@ export const BlocksEditor: FunctionComponent<BlocksEditorProps> = ({
children,
previewLength,
spellcheck,
ignoreFirstChange = false,
}) => {
const [didIgnoreFirstChange, setDidIgnoreFirstChange] = useState(false);
const handleChange = useCallback(
(editorState: EditorState, _editor: LexicalEditor) => {
if (!didIgnoreFirstChange) {
if (ignoreFirstChange && !didIgnoreFirstChange) {
setDidIgnoreFirstChange(true);
return;
}
@@ -88,7 +90,7 @@ export const BlocksEditor: FunctionComponent<BlocksEditorProps> = ({
{children}
<RichTextPlugin
contentEditable={
<div id="blocks-editor" className="editor-scroller">
<div id="blocks-editor" className="editor-scroller h-full">
<div className="editor" ref={onRef}>
<ContentEditable
id={SuperEditorContentId}
@@ -120,7 +122,6 @@ export const BlocksEditor: FunctionComponent<BlocksEditorProps> = ({
<CodeHighlightPlugin />
<LinkPlugin />
<HashtagPlugin />
<AutoEmbedPlugin />
<TwitterPlugin />
<YouTubePlugin />

5
packages/features/src/Domain/Component/EditorIdentifier.ts Normal file
View File

@@ -0,0 +1,5 @@
import { FeatureIdentifier } from './../Feature/FeatureIdentifier'
type ThirdPartyIdentifier = string
export type EditorIdentifier = FeatureIdentifier | ThirdPartyIdentifier

17
packages/features/src/Domain/Component/NoteType.spec.ts Normal file
View File

@@ -0,0 +1,17 @@
import { FeatureIdentifier } from '@standardnotes/features'
import { noteTypeForEditorIdentifier, NoteType } from './NoteType'
describe('note type', () => {
it('should return the correct note type for editor identifier', () => {
expect(noteTypeForEditorIdentifier(FeatureIdentifier.PlainEditor)).toEqual(NoteType.Plain)
expect(noteTypeForEditorIdentifier(FeatureIdentifier.SuperEditor)).toEqual(NoteType.Super)
expect(noteTypeForEditorIdentifier(FeatureIdentifier.MarkdownVisualEditor)).toEqual(NoteType.Markdown)
expect(noteTypeForEditorIdentifier(FeatureIdentifier.MarkdownProEditor)).toEqual(NoteType.Markdown)
expect(noteTypeForEditorIdentifier(FeatureIdentifier.PlusEditor)).toEqual(NoteType.RichText)
expect(noteTypeForEditorIdentifier(FeatureIdentifier.CodeEditor)).toEqual(NoteType.Code)
expect(noteTypeForEditorIdentifier(FeatureIdentifier.SheetsEditor)).toEqual(NoteType.Spreadsheet)
expect(noteTypeForEditorIdentifier(FeatureIdentifier.TaskEditor)).toEqual(NoteType.Task)
expect(noteTypeForEditorIdentifier(FeatureIdentifier.TokenVaultEditor)).toEqual(NoteType.Authentication)
expect(noteTypeForEditorIdentifier('org.third.party')).toEqual(NoteType.Unknown)
})
})

21
packages/features/src/Domain/Component/NoteType.ts
View File

@@ -1,3 +1,7 @@
import { FindNativeFeature } from '../Feature/Features'
import { FeatureIdentifier } from './../Feature/FeatureIdentifier'
import { EditorIdentifier } from './EditorIdentifier'
export enum NoteType {
Authentication = 'authentication',
Code = 'code',
@@ -6,6 +10,21 @@ export enum NoteType {
Spreadsheet = 'spreadsheet',
Task = 'task',
Plain = 'plain-text',
Blocks = 'blocks',
Super = 'super',
Unknown = 'unknown',
}
export function noteTypeForEditorIdentifier(identifier: EditorIdentifier): NoteType {
if (identifier === FeatureIdentifier.PlainEditor) {
return NoteType.Plain
} else if (identifier === FeatureIdentifier.SuperEditor) {
return NoteType.Super
}
const feature = FindNativeFeature(identifier as FeatureIdentifier)
if (feature && feature.note_type) {
return feature.note_type
}
return NoteType.Unknown
}

1
packages/features/src/Domain/Feature/FeatureDescription.ts
View File

@@ -13,6 +13,7 @@ type RoleFields = {
/** Statically populated. Non-influencing; used as a reference by other static consumers (such as email service) */
availableInSubscriptions: SubscriptionName[]
availableInRoles?: RoleName[]
}
export type BaseFeatureDescription = RoleFields & {

7
packages/features/src/Domain/Feature/FeatureIdentifier.ts
View File

@@ -6,7 +6,6 @@ export enum FeatureIdentifier {
DailyGDriveBackup = 'org.standardnotes.daily-gdrive-backup',
DailyOneDriveBackup = 'org.standardnotes.daily-onedrive-backup',
Files = 'org.standardnotes.files',
FilesBeta = 'org.standardnotes.files-beta',
FilesLowStorageTier = 'org.standardnotes.files-low-storage-tier',
FilesMaximumStorageTier = 'org.standardnotes.files-max-storage-tier',
ListedCustomDomain = 'org.standardnotes.listed-custom-domain',
@@ -28,10 +27,12 @@ export enum FeatureIdentifier {
SolarizedDarkTheme = 'org.standardnotes.theme-solarized-dark',
TitaniumTheme = 'org.standardnotes.theme-titanium',
PlainEditor = 'com.standardnotes.plain-text',
SuperEditor = 'com.standardnotes.super-editor',
CodeEditor = 'org.standardnotes.code-editor',
MarkdownProEditor = 'org.standardnotes.advanced-markdown-editor',
MarkdownVisualEditor = 'org.standardnotes.markdown-visual-editor',
PlainTextEditor = 'org.standardnotes.plain-text-editor',
PlusEditor = 'org.standardnotes.plus-editor',
SheetsEditor = 'org.standardnotes.standard-sheets',
TaskEditor = 'org.standardnotes.simple-task-editor',
@@ -50,4 +51,4 @@ export enum FeatureIdentifier {
*/
export const LegacyFileSafeIdentifier = 'org.standardnotes.legacy.file-safe'
export const ExperimentalFeatures = []
export const ExperimentalFeatures = [FeatureIdentifier.SuperEditor]

9
packages/features/src/Domain/Lists/ClientFeatures.ts
View File

@@ -21,18 +21,11 @@ export function clientFeatures(): ClientFeatureDescription[] {
},
{
availableInSubscriptions: [SubscriptionName.PlusPlan, SubscriptionName.ProPlan],
name: 'Encrypted files (coming soon)',
name: 'Encrypted files',
identifier: FeatureIdentifier.Files,
permission_name: PermissionName.Files,
description: '',
},
{
availableInSubscriptions: [SubscriptionName.PlusPlan, SubscriptionName.ProPlan],
name: 'Encrypted files beta',
identifier: FeatureIdentifier.FilesBeta,
permission_name: PermissionName.FilesBeta,
description: '',
},
{
availableInSubscriptions: [SubscriptionName.PlusPlan, SubscriptionName.ProPlan],
name: 'Focus Mode',

15
packages/features/src/Domain/Lists/ExperimentalFeatures.ts
View File

@@ -1,5 +1,18 @@
import { FeatureIdentifier } from './../Feature/FeatureIdentifier'
import { RoleName, SubscriptionName } from '@standardnotes/common'
import { FeatureDescription } from '../Feature/FeatureDescription'
import { PermissionName } from '../Permission/PermissionName'
export function experimentalFeatures(): FeatureDescription[] {
return []
const superEditor: FeatureDescription = {
name: 'Super Notes',
identifier: FeatureIdentifier.SuperEditor,
availableInSubscriptions: [SubscriptionName.PlusPlan, SubscriptionName.ProPlan],
permission_name: PermissionName.SuperEditor,
description:
'A new way to edit notes. Type / to bring up the block selection menu, or @ to embed images or link other tags and notes. Type - then space to start a list, or [] then space to start a checklist. Drag and drop an image or file to embed it in your note.',
availableInRoles: [RoleName.PlusUser, RoleName.ProUser],
}
return [superEditor]
}

1
packages/features/src/Domain/Permission/PermissionName.ts
View File

@@ -39,4 +39,5 @@ export enum PermissionName {
TokenVaultEditor = 'editor:token-vault',
TwoFactorAuth = 'server:two-factor-auth',
SubscriptionSharing = 'server:subscription-sharing',
SuperEditor = 'editor:super-editor',
}

1
packages/features/src/Domain/index.ts
View File

@@ -11,3 +11,4 @@ export * from './Component/ComponentFlag'
export * from './Component/ComponentPermission'
export * from './Component/NoteType'
export * from './Component/ThemeDockIcon'
export * from './Component/EditorIdentifier'

3
packages/models/src/Domain/Syncable/Component/Component.ts
View File

@@ -114,7 +114,8 @@ export class SNComponent extends DecryptedItem<ComponentContent> implements Comp
return this.content_type === ContentType.Theme || this.area === ComponentArea.Themes
}
public isDefaultEditor(): boolean {
/** @deprecated Use global application PrefKey.DefaultEditorIdentifier */
public legacyIsDefaultEditor(): boolean {
return this.getAppDomainValue(AppDataField.DefaultEditor) === true
}

4
packages/models/src/Domain/Syncable/Component/ComponentMutator.ts
View File

@@ -14,10 +14,6 @@ export class ComponentMutator extends DecryptedItemMutator<ComponentContent> {
this.mutableContent.isMobileDefault = isMobileDefault
}
set defaultEditor(defaultEditor: boolean) {
this.setAppDataItem(AppDataField.DefaultEditor, defaultEditor)
}
set componentData(componentData: Record<string, unknown>) {
this.mutableContent.componentData = componentData
}

4
packages/models/src/Domain/Syncable/Tag/TagPreferences.ts
View File

@@ -1,4 +1,4 @@
import { FeatureIdentifier } from '@standardnotes/features'
import { EditorIdentifier } from '@standardnotes/features'
import { NewNoteTitleFormat } from '../UserPrefs'
import { CollectionSortProperty } from './../../Runtime/Collection/CollectionSort'
@@ -15,7 +15,7 @@ export interface TagPreferences {
hideEditorIcon?: boolean
newNoteTitleFormat?: NewNoteTitleFormat
customNoteTitleFormat?: string
editorIdentifier?: FeatureIdentifier | string
editorIdentifier?: EditorIdentifier
entryMode?: 'normal' | 'daily'
panelWidth?: number
}

4
packages/models/src/Domain/Syncable/UserPrefs/PrefKey.ts
View File

@@ -1,5 +1,5 @@
import { CollectionSortProperty } from '../../Runtime/Collection/CollectionSort'
import { FeatureIdentifier } from '@standardnotes/features'
import { EditorIdentifier, FeatureIdentifier } from '@standardnotes/features'
export enum PrefKey {
TagsPanelWidth = 'tagsPanelWidth',
@@ -38,6 +38,7 @@ export enum PrefKey {
CustomNoteTitleFormat = 'customNoteTitleFormat',
UpdateSavingStatusIndicator = 'updateSavingStatusIndicator',
DarkMode = 'darkMode',
DefaultEditorIdentifier = 'defaultEditorIdentifier',
}
export enum NewNoteTitleFormat {
@@ -101,4 +102,5 @@ export type PrefValue = {
[PrefKey.EditorFontSize]: EditorFontSize
[PrefKey.UpdateSavingStatusIndicator]: boolean
[PrefKey.DarkMode]: boolean
[PrefKey.DefaultEditorIdentifier]: EditorIdentifier
}

2
packages/services/src/Domain/Component/ComponentManagerInterface.ts
View File

@@ -20,6 +20,6 @@ export interface ComponentManagerInterface {
urlOverride?: string,
): ComponentViewerInterface
presentPermissionsDialog(_dialog: PermissionDialog): void
getDefaultEditor(): SNComponent | undefined
legacyGetDefaultEditor(): SNComponent | undefined
componentWithIdentifier(identifier: FeatureIdentifier | string): SNComponent | undefined
}

34
packages/snjs/lib/Client/NoteViewController.spec.ts
View File

@@ -1,34 +0,0 @@
import { SNApplication } from './../Application/Application'
import { ContentType } from '@standardnotes/common'
import { MutatorService } from './../Services/Mutator/MutatorService'
import { SNComponentManager } from './../Services/ComponentManager/ComponentManager'
import { NoteType } from '@standardnotes/features'
import { NoteViewController } from './NoteViewController'
describe('note view controller', () => {
let application: SNApplication
beforeEach(() => {
application = {} as jest.Mocked<SNApplication>
application.streamItems = jest.fn()
const componentManager = {} as jest.Mocked<SNComponentManager>
componentManager.getDefaultEditor = jest.fn()
Object.defineProperty(application, 'componentManager', { value: componentManager })
const mutator = {} as jest.Mocked<MutatorService>
mutator.createTemplateItem = jest.fn()
Object.defineProperty(application, 'mutator', { value: mutator })
})
it('should create notes with plaintext note type', async () => {
const controller = new NoteViewController(application)
await controller.initialize(false)
expect(application.mutator.createTemplateItem).toHaveBeenCalledWith(
ContentType.Note,
expect.objectContaining({ noteType: NoteType.Plain }),
expect.anything(),
)
})
})

4
packages/snjs/lib/Client/index.ts
View File

@@ -1,5 +1 @@
export * from './NoteViewController'
export * from './FileViewController'
export * from './ItemGroupController'
export * from './ReactNativeToWebEvent'
export * from './TemplateNoteViewControllerOptions'

6
packages/snjs/lib/Services/ComponentManager/ComponentManager.ts
View File

@@ -619,7 +619,7 @@ export class SNComponentManager
return editor
}
}
const defaultEditor = this.getDefaultEditor()
const defaultEditor = this.legacyGetDefaultEditor()
if (defaultEditor && !defaultEditor.isExplicitlyDisabledForItem(note.uuid)) {
return defaultEditor
@@ -628,9 +628,9 @@ export class SNComponentManager
}
}
getDefaultEditor(): SNComponent | undefined {
legacyGetDefaultEditor(): SNComponent | undefined {
const editors = this.componentsForArea(ComponentArea.Editor)
return editors.filter((e) => e.isDefaultEditor())[0]
return editors.filter((e) => e.legacyIsDefaultEditor())[0]
}
permissionsStringForPermissions(permissions: ComponentPermission[], component: SNComponent): string {

23
packages/snjs/lib/Services/Features/FeaturesService.ts
View File

@@ -173,24 +173,19 @@ export class SNFeaturesService
public enableExperimentalFeature(identifier: FeaturesImports.FeatureIdentifier): void {
const feature = this.getUserFeature(identifier)
if (!feature) {
throw Error('Attempting to enable a feature user does not have access to.')
}
this.enabledExperimentalFeatures.push(identifier)
void this.storageService.setValue(StorageKey.ExperimentalFeatures, this.enabledExperimentalFeatures)
void this.mapRemoteNativeFeaturesToItems([feature])
if (feature) {
void this.mapRemoteNativeFeaturesToItems([feature])
}
void this.notifyEvent(FeaturesEvent.FeaturesUpdated)
}
public disableExperimentalFeature(identifier: FeaturesImports.FeatureIdentifier): void {
const feature = this.getUserFeature(identifier)
if (!feature) {
throw Error('Attempting to disable a feature user does not have access to.')
}
removeFromArray(this.enabledExperimentalFeatures, identifier)
void this.storageService.setValue(StorageKey.ExperimentalFeatures, this.enabledExperimentalFeatures)
@@ -486,6 +481,16 @@ export class SNFeaturesService
return FeatureStatus.Entitled
}
if (this.isExperimentalFeature(featureId)) {
const nativeFeature = FeaturesImports.FindNativeFeature(featureId)
if (nativeFeature) {
const hasRole = this.roles.some((role) => nativeFeature.availableInRoles?.includes(role))
if (hasRole) {
return FeatureStatus.Entitled
}
}
}
const isDeprecated = this.isFeatureDeprecated(featureId)
if (isDeprecated) {
if (this.hasPaidOnlineOrOfflineSubscription()) {

95
packages/web/src/javascripts/Application/Application.spec.ts Normal file
View File

@@ -0,0 +1,95 @@
/**
* @jest-environment jsdom
*/
import {
Environment,
FeatureIdentifier,
namespacedKey,
Platform,
RawStorageKey,
SNComponent,
SNComponentManager,
SNLog,
SNTag,
} from '@standardnotes/snjs'
import { WebApplication } from '@/Application/Application'
import { WebOrDesktopDevice } from './Device/WebOrDesktopDevice'
describe('web application', () => {
let application: WebApplication
let componentManager: SNComponentManager
// eslint-disable-next-line no-console
SNLog.onLog = console.log
SNLog.onError = console.error
beforeEach(() => {
const identifier = '123'
window.matchMedia = jest.fn().mockReturnValue({ matches: true, addListener: jest.fn() })
const device = {
environment: Environment.Desktop,
appVersion: '1.2.3',
setApplication: jest.fn(),
openDatabase: jest.fn().mockReturnValue(Promise.resolve()),
getRawStorageValue: jest.fn().mockImplementation((key) => {
if (key === namespacedKey(identifier, RawStorageKey.SnjsVersion)) {
return '10.0.0'
}
return undefined
}),
setRawStorageValue: jest.fn(),
} as unknown as jest.Mocked<WebOrDesktopDevice>
application = new WebApplication(device, Platform.MacWeb, identifier, 'https://sync', 'https://socket')
componentManager = {} as jest.Mocked<SNComponentManager>
componentManager.legacyGetDefaultEditor = jest.fn()
Object.defineProperty(application, 'componentManager', { value: componentManager })
application.prepareForLaunch({ receiveChallenge: jest.fn() })
})
describe('geDefaultEditorIdentifier', () => {
it('should return plain editor if no default tag editor or component editor', () => {
const editorIdentifier = application.geDefaultEditorIdentifier()
expect(editorIdentifier).toEqual(FeatureIdentifier.PlainEditor)
})
it('should return pref key based value if available', () => {
application.getPreference = jest.fn().mockReturnValue(FeatureIdentifier.SuperEditor)
const editorIdentifier = application.geDefaultEditorIdentifier()
expect(editorIdentifier).toEqual(FeatureIdentifier.SuperEditor)
})
it('should return default tag identifier if tag supplied', () => {
const tag = {
preferences: {
editorIdentifier: FeatureIdentifier.SuperEditor,
},
} as jest.Mocked<SNTag>
const editorIdentifier = application.geDefaultEditorIdentifier(tag)
expect(editorIdentifier).toEqual(FeatureIdentifier.SuperEditor)
})
it('should return legacy editor identifier', () => {
const editor = {
legacyIsDefaultEditor: jest.fn().mockReturnValue(true),
identifier: FeatureIdentifier.MarkdownProEditor,
} as unknown as jest.Mocked<SNComponent>
componentManager.legacyGetDefaultEditor = jest.fn().mockReturnValue(editor)
const editorIdentifier = application.geDefaultEditorIdentifier()
expect(editorIdentifier).toEqual(FeatureIdentifier.MarkdownProEditor)
})
})
})

32
packages/web/src/javascripts/Application/Application.ts
View File

@@ -5,7 +5,6 @@ import {
DeinitSource,
Platform,
SNApplication,
ItemGroupController,
removeFromArray,
DesktopDeviceInterface,
isDesktopDevice,
@@ -20,6 +19,8 @@ import {
MobileUnlockTiming,
InternalEventBus,
DecryptedItem,
EditorIdentifier,
FeatureIdentifier,
} from '@standardnotes/snjs'
import { makeObservable, observable } from 'mobx'
import { PanelResizedData } from '@/Types/PanelResizedData'
@@ -40,6 +41,8 @@ import { PrefDefaults } from '@/Constants/PrefDefaults'
import { setCustomViewportHeight } from '@/setViewportHeightWithFallback'
import { WebServices } from './WebServices'
import { FeatureName } from '@/Controllers/FeatureName'
import { ItemGroupController } from '@/Components/NoteView/Controller/ItemGroupController'
import { VisibilityObserver } from './VisibilityObserver'
export type WebEventObserver = (event: WebAppEvent, data?: unknown) => void
@@ -47,10 +50,10 @@ export class WebApplication extends SNApplication implements WebApplicationInter
private webServices!: WebServices
private webEventObservers: WebEventObserver[] = []
public itemControllerGroup: ItemGroupController
private onVisibilityChange: () => void
private mobileWebReceiver?: MobileWebReceiver
private androidBackHandler?: AndroidBackHandler
public readonly routeService: RouteServiceInterface
private visibilityObserver?: VisibilityObserver
constructor(
deviceInterface: WebOrDesktopDevice,
@@ -106,14 +109,10 @@ export class WebApplication extends SNApplication implements WebApplicationInter
}
}
this.onVisibilityChange = () => {
const visible = document.visibilityState === 'visible'
const event = visible ? WebAppEvent.WindowDidFocus : WebAppEvent.WindowDidBlur
this.notifyWebEvent(event)
}
if (!isDesktopApplication()) {
document.addEventListener('visibilitychange', this.onVisibilityChange)
this.visibilityObserver = new VisibilityObserver((event) => {
this.notifyWebEvent(event)
})
}
}
@@ -144,8 +143,10 @@ export class WebApplication extends SNApplication implements WebApplicationInter
this.webEventObservers.length = 0
document.removeEventListener('visibilitychange', this.onVisibilityChange)
;(this.onVisibilityChange as unknown) = undefined
if (this.visibilityObserver) {
this.visibilityObserver.deinit()
this.visibilityObserver = undefined
}
} catch (error) {
console.error('Error while deiniting application', error)
}
@@ -379,4 +380,13 @@ export class WebApplication extends SNApplication implements WebApplicationInter
showAccountMenu(): void {
this.getViewControllerManager().accountMenuController.setShow(true)
}
geDefaultEditorIdentifier(currentTag?: SNTag): EditorIdentifier {
return (
currentTag?.preferences?.editorIdentifier ||
this.getPreference(PrefKey.DefaultEditorIdentifier) ||
this.componentManager.legacyGetDefaultEditor()?.identifier ||
FeatureIdentifier.PlainEditor
)
}
}

40
packages/web/src/javascripts/Application/VisibilityObserver.ts Normal file
View File

@@ -0,0 +1,40 @@
import { WebAppEvent } from '@standardnotes/snjs'
export class VisibilityObserver {
private raceTimeout?: ReturnType<typeof setTimeout>
constructor(private onEvent: (event: WebAppEvent) => void) {
/**
* Browsers may handle focus and visibilitychange events differently.
* Focus better handles window focus events but may not handle tab switching.
* We will listen for both and debouce notifying so that the most recent event wins.
*/
document.addEventListener('visibilitychange', this.onVisibilityChange)
window.addEventListener('focus', this.onFocusEvent, false)
}
onVisibilityChange = () => {
const visible = document.visibilityState === 'visible'
const event = visible ? WebAppEvent.WindowDidFocus : WebAppEvent.WindowDidBlur
this.notifyEvent(event)
}
onFocusEvent = () => {
this.notifyEvent(WebAppEvent.WindowDidFocus)
}
private notifyEvent(event: WebAppEvent): void {
if (this.raceTimeout) {
clearTimeout(this.raceTimeout)
}
this.raceTimeout = setTimeout(() => {
this.onEvent(event)
}, 250)
}
deinit(): void {
document.removeEventListener('visibilitychange', this.onVisibilityChange)
window.removeEventListener('focus', this.onFocusEvent)
;(this.onEvent as unknown) = undefined
}
}

22
packages/web/src/javascripts/Components/BlockEditor/BlockEditorController.tsx
View File

@@ -1,22 +0,0 @@
import { WebApplication } from '@/Application/Application'
import { NoteMutator, SNNote } from '@standardnotes/snjs'
export class BlockEditorController {
constructor(private note: SNNote, private application: WebApplication) {
this.note = note
this.application = application
}
deinit() {
;(this.note as unknown) = undefined
;(this.application as unknown) = undefined
}
async save(values: { text: string; previewPlain: string; previewHtml?: string }): Promise<void> {
await this.application.mutator.changeAndSaveItem<NoteMutator>(this.note, (mutator) => {
mutator.text = values.text
mutator.preview_plain = values.previewPlain
mutator.preview_html = values.previewHtml
})
}
}

4
packages/web/src/javascripts/Components/ChangeEditor/ChangeEditorMenu.tsx
View File

@@ -12,7 +12,7 @@ import { EditorMenuItem } from '@/Components/NotesOptions/EditorMenuItem'
import { createEditorMenuGroups } from '../../Utils/createEditorMenuGroups'
import { reloadFont } from '../NoteView/FontFunctions'
import { PremiumFeatureIconClass, PremiumFeatureIconName } from '../Icon/PremiumFeatureIcon'
import { SuperNoteImporter } from '../BlockEditor/SuperNoteImporter'
import { SuperNoteImporter } from '../NoteView/SuperEditor/SuperNoteImporter'
type ChangeEditorMenuProps = {
application: WebApplication
@@ -114,7 +114,7 @@ const ChangeEditorMenu: FunctionComponent<ChangeEditorMenuProps> = ({
return
}
if (itemToBeSelected.noteType === NoteType.Blocks) {
if (itemToBeSelected.noteType === NoteType.Super) {
setPendingSuperItem(itemToBeSelected)
handleDisableClickoutsideRequest?.()
setShowSuperImporter(true)

111
packages/web/src/javascripts/Components/ContentListView/Header/NewNotePreferences.tsx
View File

@@ -1,12 +1,4 @@
import {
ComponentArea,
ComponentMutator,
FeatureIdentifier,
NewNoteTitleFormat,
PrefKey,
SNComponent,
TagPreferences,
} from '@standardnotes/snjs'
import { FeatureIdentifier, NewNoteTitleFormat, PrefKey, EditorIdentifier, TagPreferences } from '@standardnotes/snjs'
import { observer } from 'mobx-react-lite'
import { ChangeEventHandler, FunctionComponent, useCallback, useEffect, useRef, useState } from 'react'
import { PrefDefaults } from '@/Constants/PrefDefaults'
@@ -16,31 +8,14 @@ import { WebApplication } from '@/Application/Application'
import { AnyTag } from '@/Controllers/Navigation/AnyTagType'
import { PreferenceMode } from './PreferenceMode'
import dayjs from 'dayjs'
import { getDropdownItemsForAllEditors, PlainEditorType } from '@/Utils/DropdownItemsForEditors'
import { EditorOption, getDropdownItemsForAllEditors } from '@/Utils/DropdownItemsForEditors'
import { classNames } from '@/Utils/ConcatenateClassNames'
import { NoteTitleFormatOptions } from './NoteTitleFormatOptions'
const PrefChangeDebounceTimeInMs = 25
const HelpPageUrl = 'https://day.js.org/docs/en/display/format#list-of-all-available-formats'
const NoteTitleFormatOptions = [
{
label: 'Current date and time',
value: NewNoteTitleFormat.CurrentDateAndTime,
},
{
label: 'Current note count',
value: NewNoteTitleFormat.CurrentNoteCount,
},
{
label: 'Custom format',
value: NewNoteTitleFormat.CustomFormat,
},
{
label: 'Empty',
value: NewNoteTitleFormat.Empty,
},
]
type Props = {
application: WebApplication
selectedTag: AnyTag
@@ -57,22 +32,24 @@ const NewNotePreferences: FunctionComponent<Props> = ({
disabled,
}: Props) => {
const [editorItems, setEditorItems] = useState<DropdownItem[]>([])
const [defaultEditorIdentifier, setDefaultEditorIdentifier] = useState<string>(PlainEditorType)
const [defaultEditorIdentifier, setDefaultEditorIdentifier] = useState<EditorIdentifier>(
FeatureIdentifier.PlainEditor,
)
const [newNoteTitleFormat, setNewNoteTitleFormat] = useState<NewNoteTitleFormat>(
NewNoteTitleFormat.CurrentDateAndTime,
)
const [customNoteTitleFormat, setCustomNoteTitleFormat] = useState('')
const getGlobalEditorDefault = useCallback((): SNComponent | undefined => {
return application.componentManager.componentsForArea(ComponentArea.Editor).filter((e) => e.isDefaultEditor())[0]
const getGlobalEditorDefaultIdentifier = useCallback((): string => {
return application.geDefaultEditorIdentifier()
}, [application])
const reloadPreferences = useCallback(() => {
if (mode === 'tag' && selectedTag.preferences?.editorIdentifier) {
setDefaultEditorIdentifier(selectedTag.preferences?.editorIdentifier)
} else {
const globalDefault = getGlobalEditorDefault()
setDefaultEditorIdentifier(globalDefault?.identifier || PlainEditorType)
const globalDefault = getGlobalEditorDefaultIdentifier()
setDefaultEditorIdentifier(globalDefault)
}
if (mode === 'tag' && selectedTag.preferences?.newNoteTitleFormat) {
@@ -82,7 +59,14 @@ const NewNotePreferences: FunctionComponent<Props> = ({
application.getPreference(PrefKey.NewNoteTitleFormat, PrefDefaults[PrefKey.NewNoteTitleFormat]),
)
}
}, [mode, selectedTag, application, getGlobalEditorDefault, setDefaultEditorIdentifier, setNewNoteTitleFormat])
}, [
mode,
selectedTag,
application,
getGlobalEditorDefaultIdentifier,
setDefaultEditorIdentifier,
setNewNoteTitleFormat,
])
useEffect(() => {
if (mode === 'tag' && selectedTag.preferences?.customNoteTitleFormat) {
@@ -107,52 +91,22 @@ const NewNotePreferences: FunctionComponent<Props> = ({
}
}
const removeEditorGlobalDefault = (application: WebApplication, component: SNComponent) => {
application.mutator
.changeAndSaveItem(component, (m) => {
const mutator = m as ComponentMutator
mutator.defaultEditor = false
})
.catch(console.error)
}
const makeEditorGlobalDefault = (
application: WebApplication,
component: SNComponent,
currentDefault?: SNComponent,
) => {
if (currentDefault) {
removeEditorGlobalDefault(application, currentDefault)
}
application.mutator
.changeAndSaveItem(component, (m) => {
const mutator = m as ComponentMutator
mutator.defaultEditor = true
})
.catch(console.error)
}
useEffect(() => {
setEditorItems(getDropdownItemsForAllEditors(application))
}, [application])
const setDefaultEditor = (value: string) => {
setDefaultEditorIdentifier(value as FeatureIdentifier)
const setDefaultEditor = useCallback(
(value: EditorOption['value']) => {
setDefaultEditorIdentifier(value as FeatureIdentifier)
if (mode === 'global') {
const editors = application.componentManager.componentsForArea(ComponentArea.Editor)
const currentDefault = getGlobalEditorDefault()
if (value !== PlainEditorType) {
const editorComponent = editors.filter((e) => e.package_info.identifier === value)[0]
makeEditorGlobalDefault(application, editorComponent, currentDefault)
} else if (currentDefault) {
removeEditorGlobalDefault(application, currentDefault)
if (mode === 'global') {
void application.setPreference(PrefKey.DefaultEditorIdentifier, value)
} else {
void changePreferencesCallback({ editorIdentifier: value })
}
} else {
void changePreferencesCallback({ editorIdentifier: value })
}
}
},
[application, changePreferencesCallback, mode],
)
const debounceTimeoutRef = useRef<number>()
@@ -187,7 +141,7 @@ const NewNotePreferences: FunctionComponent<Props> = ({
label="Select the default note type"
items={editorItems}
value={defaultEditorIdentifier}
onChange={setDefaultEditor}
onChange={(value) => setDefaultEditor(value as EditorOption['value'])}
/>
</div>
</div>
@@ -211,7 +165,10 @@ const NewNotePreferences: FunctionComponent<Props> = ({
<div className="mt-2">
<input
disabled={disabled}
className="w-full min-w-55 rounded border border-solid border-passive-3 bg-default px-2 py-1.5 text-sm focus-within:ring-2 focus-within:ring-info"
className={classNames(
'w-full min-w-55 rounded border border-solid border-passive-3 bg-default px-2 py-1.5 text-sm',
'focus-within:ring-2 focus-within:ring-info',
)}
placeholder="e.g. YYYY-MM-DD"
value={customNoteTitleFormat}
onChange={handleCustomFormatInputChange}

20
packages/web/src/javascripts/Components/ContentListView/Header/NoteTitleFormatOptions.tsx Normal file
View File

@@ -0,0 +1,20 @@
import { NewNoteTitleFormat } from '@standardnotes/snjs'
export const NoteTitleFormatOptions = [
{
label: 'Current date and time',
value: NewNoteTitleFormat.CurrentDateAndTime,
},
{
label: 'Current note count',
value: NewNoteTitleFormat.CurrentNoteCount,
},
{
label: 'Custom format',
value: NewNoteTitleFormat.CustomFormat,
},
{
label: 'Empty',
value: NewNoteTitleFormat.Empty,
},
]

3
packages/web/src/javascripts/Components/ContentListView/ListItemNotePreviewText.tsx
View File

@@ -25,9 +25,6 @@ const ListItemNotePreviewText: FunctionComponent<Props> = ({ item, hidePreview,
{!item.preview_html && item.preview_plain && (
<div className={`leading-1.3 line-clamp-${lineLimit} mt-1 overflow-hidden`}>{item.preview_plain}</div>
)}
{!item.preview_html && !item.preview_plain && item.text && (
<div className={`leading-1.3 line-clamp-${lineLimit} mt-1 overflow-hidden`}>{item.text}</div>
)}
</div>
)
}

8
packages/web/src/javascripts/Components/ContentListView/NoteListItem.tsx
View File

@@ -1,4 +1,3 @@
import { PLAIN_EDITOR_NAME } from '@/Constants/Constants'
import { isFile, SNNote } from '@standardnotes/snjs'
import { observer } from 'mobx-react-lite'
import { FunctionComponent, useCallback, useRef } from 'react'
@@ -36,9 +35,8 @@ const NoteListItem: FunctionComponent<DisplayableListItemProps<SNNote>> = ({
const listItemRef = useRef<HTMLDivElement>(null)
const editorForNote = application.componentManager.editorForNote(item as SNNote)
const editorName = editorForNote?.name ?? PLAIN_EDITOR_NAME
const [icon, tint] = getIconAndTintForNoteType(editorForNote?.package_info.note_type)
const noteType = item.noteType || application.componentManager.editorForNote(item)?.package_info.note_type
const [icon, tint] = getIconAndTintForNoteType(noteType)
const hasFiles = application.items.itemsReferencingItem(item).filter(isFile).length > 0
const openNoteContextMenu = (posX: number, posY: number) => {
@@ -93,7 +91,7 @@ const NoteListItem: FunctionComponent<DisplayableListItemProps<SNNote>> = ({
>
{!hideIcon ? (
<div className="mr-0 flex flex-col items-center justify-between p-4 pr-4">
<Icon ariaLabel={`Icon for ${editorName}`} type={icon} className={`text-accessory-tint-${tint}`} />
<Icon type={icon} className={`text-accessory-tint-${tint}`} />
</div>
) : (
<div className="pr-4" />

4
packages/web/src/javascripts/Components/NoteGroupView/NoteGroupView.tsx
View File

@@ -1,4 +1,4 @@
import { FileItem, FileViewController, NoteViewController } from '@standardnotes/snjs'
import { FileItem } from '@standardnotes/snjs'
import { AbstractComponent } from '@/Components/Abstract/PureComponent'
import { WebApplication } from '@/Application/Application'
import MultipleSelectedNotes from '@/Components/MultipleSelectedNotes/MultipleSelectedNotes'
@@ -8,6 +8,8 @@ import { AppPaneId } from '../ResponsivePane/AppPaneMetadata'
import ResponsivePaneContent from '../ResponsivePane/ResponsivePaneContent'
import FileView from '../FileView/FileView'
import NoteView from '../NoteView/NoteView'
import { NoteViewController } from '../NoteView/Controller/NoteViewController'
import { FileViewController } from '../NoteView/Controller/FileViewController'
type State = {
showMultipleSelectedNotes: boolean

5
packages/web/src/javascripts/Components/NoteView/Controller/EditorSaveTimeoutDebounce.ts Normal file
View File

@@ -0,0 +1,5 @@
export const EditorSaveTimeoutDebounce = {
Desktop: 350,
ImmediateChange: 100,
NativeMobileWeb: 700,
}

2
packages/snjs/lib/Client/FileViewController.ts → packages/web/src/javascripts/Components/NoteView/Controller/FileViewController.ts
View File

@@ -1,6 +1,6 @@
import { FileItem } from '@standardnotes/models'
import { ContentType } from '@standardnotes/common'
import { SNApplication } from '../Application/Application'
import { SNApplication } from '@standardnotes/snjs'
import { ItemViewControllerInterface } from './ItemViewControllerInterface'
export class FileViewController implements ItemViewControllerInterface {

42
packages/snjs/lib/Client/ItemGroupController.ts → packages/web/src/javascripts/Components/NoteView/Controller/ItemGroupController.ts
View File

@@ -1,32 +1,18 @@
import { FileItem, PrefKey, SNNote } from '@standardnotes/models'
import { WebApplication } from '@/Application/Application'
import { removeFromArray } from '@standardnotes/utils'
import { ApplicationEvent } from '@standardnotes/services'
import { SNApplication } from '../Application/Application'
import { FileItem, SNNote } from '@standardnotes/snjs'
import { NoteViewController } from './NoteViewController'
import { FileViewController } from './FileViewController'
import { TemplateNoteViewControllerOptions } from './TemplateNoteViewControllerOptions'
type ItemControllerGroupChangeCallback = (activeController: NoteViewController | FileViewController | undefined) => void
type CreateItemControllerOptions = FileItem | SNNote | TemplateNoteViewControllerOptions
export class ItemGroupController {
public itemControllers: (NoteViewController | FileViewController)[] = []
private addTagHierarchy: boolean
changeObservers: ItemControllerGroupChangeCallback[] = []
eventObservers: (() => void)[] = []
constructor(private application: SNApplication) {
this.addTagHierarchy = application.getPreference(PrefKey.NoteAddToParentFolders, true)
this.eventObservers.push(
application.addSingleEventObserver(ApplicationEvent.PreferencesChanged, async () => {
this.addTagHierarchy = application.getPreference(PrefKey.NoteAddToParentFolders, true)
}),
)
}
constructor(private application: WebApplication) {}
public deinit(): void {
;(this.application as unknown) = undefined
@@ -44,26 +30,30 @@ export class ItemGroupController {
this.itemControllers.length = 0
}
async createItemController(options: CreateItemControllerOptions): Promise<NoteViewController | FileViewController> {
async createItemController(context: {
file?: FileItem
note?: SNNote
templateOptions?: TemplateNoteViewControllerOptions
}): Promise<NoteViewController | FileViewController> {
if (this.activeItemViewController) {
this.closeItemController(this.activeItemViewController, { notify: false })
}
let controller!: NoteViewController | FileViewController
if (options instanceof FileItem) {
const file = options
controller = new FileViewController(this.application, file)
} else if (options instanceof SNNote) {
const note = options
controller = new NoteViewController(this.application, note)
if (context.file) {
controller = new FileViewController(this.application, context.file)
} else if (context.note) {
controller = new NoteViewController(this.application, context.note)
} else if (context.templateOptions) {
controller = new NoteViewController(this.application, undefined, context.templateOptions)
} else {
controller = new NoteViewController(this.application, undefined, options)
throw Error('Invalid input to createItemController')
}
this.itemControllers.push(controller)
await controller.initialize(this.addTagHierarchy)
await controller.initialize()
this.notifyObservers()

0
packages/snjs/lib/Client/ItemViewControllerInterface.ts → packages/web/src/javascripts/Components/NoteView/Controller/ItemViewControllerInterface.ts
View File

83
packages/web/src/javascripts/Components/NoteView/Controller/NoteViewController.spec.ts Normal file
View File

@@ -0,0 +1,83 @@
import { WebApplication } from '@/Application/Application'
import { ContentType } from '@standardnotes/common'
import {
MutatorService,
SNComponentManager,
SNComponent,
SNTag,
ItemsClientInterface,
SNNote,
} from '@standardnotes/snjs'
import { FeatureIdentifier, NoteType } from '@standardnotes/features'
import { NoteViewController } from './NoteViewController'
describe('note view controller', () => {
let application: WebApplication
let componentManager: SNComponentManager
beforeEach(() => {
application = {} as jest.Mocked<WebApplication>
application.streamItems = jest.fn()
application.getPreference = jest.fn().mockReturnValue(true)
Object.defineProperty(application, 'items', { value: {} as jest.Mocked<ItemsClientInterface> })
componentManager = {} as jest.Mocked<SNComponentManager>
componentManager.legacyGetDefaultEditor = jest.fn()
Object.defineProperty(application, 'componentManager', { value: componentManager })
const mutator = {} as jest.Mocked<MutatorService>
mutator.createTemplateItem = jest.fn().mockReturnValue({} as SNNote)
Object.defineProperty(application, 'mutator', { value: mutator })
})
it('should create notes with plaintext note type', async () => {
application.geDefaultEditorIdentifier = jest.fn().mockReturnValue(FeatureIdentifier.PlainEditor)
const controller = new NoteViewController(application)
await controller.initialize()
expect(application.mutator.createTemplateItem).toHaveBeenCalledWith(
ContentType.Note,
expect.objectContaining({ noteType: NoteType.Plain }),
expect.anything(),
)
})
it('should create notes with markdown note type', async () => {
componentManager.legacyGetDefaultEditor = jest.fn().mockReturnValue({
identifier: FeatureIdentifier.MarkdownProEditor,
} as SNComponent)
componentManager.componentWithIdentifier = jest.fn().mockReturnValue({
identifier: FeatureIdentifier.MarkdownProEditor,
} as SNComponent)
application.geDefaultEditorIdentifier = jest.fn().mockReturnValue(FeatureIdentifier.MarkdownProEditor)
const controller = new NoteViewController(application)
await controller.initialize()
expect(application.mutator.createTemplateItem).toHaveBeenCalledWith(
ContentType.Note,
expect.objectContaining({ noteType: NoteType.Markdown }),
expect.anything(),
)
})
it('should add tag to note if default tag is set', async () => {
application.geDefaultEditorIdentifier = jest.fn().mockReturnValue(FeatureIdentifier.PlainEditor)
const tag = {
uuid: 'tag-uuid',
} as jest.Mocked<SNTag>
application.items.findItem = jest.fn().mockReturnValue(tag)
application.items.addTagToNote = jest.fn()
const controller = new NoteViewController(application, undefined, { tag: tag.uuid })
await controller.initialize()
expect(controller['defaultTag']).toEqual(tag)
expect(application.items.addTagToNote).toHaveBeenCalledWith(expect.anything(), tag, expect.anything())
})
})

162
packages/snjs/lib/Client/NoteViewController.ts → packages/web/src/javascripts/Components/NoteView/Controller/NoteViewController.ts
View File

@@ -1,4 +1,5 @@
import { NoteType } from '@standardnotes/features'
import { WebApplication } from '@/Application/Application'
import { noteTypeForEditorIdentifier } from '@standardnotes/features'
import { InfoStrings } from '@standardnotes/services'
import {
NoteMutator,
@@ -7,13 +8,15 @@ import {
NoteContent,
DecryptedItemInterface,
PayloadEmitSource,
PrefKey,
} from '@standardnotes/models'
import { UuidString } from '@standardnotes/snjs'
import { removeFromArray } from '@standardnotes/utils'
import { ContentType } from '@standardnotes/common'
import { UuidString } from '@Lib/Types/UuidString'
import { SNApplication } from '../Application/Application'
import { ItemViewControllerInterface } from './ItemViewControllerInterface'
import { TemplateNoteViewControllerOptions } from './TemplateNoteViewControllerOptions'
import { EditorSaveTimeoutDebounce } from './EditorSaveTimeoutDebounce'
import { log, LoggingDomain } from '@/Logging'
export type EditorValues = {
title: string
@@ -23,25 +26,20 @@ export type EditorValues = {
const StringEllipses = '...'
const NotePreviewCharLimit = 160
const SaveTimeoutDebounc = {
Desktop: 350,
ImmediateChange: 100,
NativeMobileWeb: 700,
}
export class NoteViewController implements ItemViewControllerInterface {
public item!: SNNote
public dealloced = false
private innerValueChangeObservers: ((note: SNNote, source: PayloadEmitSource) => void)[] = []
private removeStreamObserver?: () => void
private disposers: (() => void)[] = []
public isTemplateNote = false
private saveTimeout?: ReturnType<typeof setTimeout>
private defaultTagUuid: UuidString | undefined
private defaultTag?: SNTag
public runtimeId = `${Math.random()}`
public needsInit = true
constructor(
private application: SNApplication,
private application: WebApplication,
item?: SNNote,
public templateNoteOptions?: TemplateNoteViewControllerOptions,
) {
@@ -60,8 +58,10 @@ export class NoteViewController implements ItemViewControllerInterface {
deinit(): void {
this.dealloced = true
this.removeStreamObserver?.()
;(this.removeStreamObserver as unknown) = undefined
for (const disposer of this.disposers) {
disposer()
}
this.disposers.length = 0
;(this.application as unknown) = undefined
;(this.item as unknown) = undefined
@@ -70,22 +70,30 @@ export class NoteViewController implements ItemViewControllerInterface {
this.saveTimeout = undefined
}
async initialize(addTagHierarchy: boolean): Promise<void> {
if (!this.item) {
const editorIdentifier =
this.defaultTag?.preferences?.editorIdentifier ||
this.application.componentManager.getDefaultEditor()?.identifier
async initialize(): Promise<void> {
if (!this.needsInit) {
throw Error('NoteViewController already initialized')
}
const defaultEditor = editorIdentifier
? this.application.componentManager.componentWithIdentifier(editorIdentifier)
: undefined
log(LoggingDomain.NoteView, 'Initializing NoteViewController')
this.needsInit = false
const addTagHierarchy = this.application.getPreference(PrefKey.NoteAddToParentFolders, true)
if (!this.item) {
log(LoggingDomain.NoteView, 'Initializing as template note')
const editorIdentifier = this.application.geDefaultEditorIdentifier(this.defaultTag)
const noteType = noteTypeForEditorIdentifier(editorIdentifier)
const note = this.application.mutator.createTemplateItem<NoteContent, SNNote>(
ContentType.Note,
{
text: '',
title: this.templateNoteOptions?.title || '',
noteType: defaultEditor?.noteType || NoteType.Plain,
noteType: noteType,
editorIdentifier: editorIdentifier,
references: [],
},
@@ -119,9 +127,8 @@ export class NoteViewController implements ItemViewControllerInterface {
return
}
this.removeStreamObserver = this.application.streamItems<SNNote>(
ContentType.Note,
({ changed, inserted, source }) => {
this.disposers.push(
this.application.streamItems<SNNote>(ContentType.Note, ({ changed, inserted, source }) => {
if (this.dealloced) {
return
}
@@ -137,11 +144,12 @@ export class NoteViewController implements ItemViewControllerInterface {
this.item = matchingNote
this.notifyObservers(matchingNote, source)
}
},
}),
)
}
public insertTemplatedNote(): Promise<DecryptedItemInterface> {
log(LoggingDomain.NoteView, 'Inserting template note')
this.isTemplateNote = false
return this.application.mutator.insertItem(this.item)
}
@@ -163,29 +171,55 @@ export class NoteViewController implements ItemViewControllerInterface {
}
}
/**
* @param bypassDebouncer Calling save will debounce by default. You can pass true to save
* immediately.
* @param isUserModified This field determines if the item will be saved as a user
* modification, thus updating the user modified date displayed in the UI
* @param dontUpdatePreviews Whether this change should update the note's plain and HTML
* preview.
* @param customMutate A custom mutator function.
*/
public async save(dto: {
editorValues: EditorValues
public async saveAndAwaitLocalPropagation(params: {
title?: string
text?: string
isUserModified: boolean
bypassDebouncer?: boolean
isUserModified?: boolean
dontUpdatePreviews?: boolean
dontGeneratePreviews?: boolean
previews?: { previewPlain: string; previewHtml?: string }
customMutate?: (mutator: NoteMutator) => void
}): Promise<void> {
const title = dto.editorValues.title
const text = dto.editorValues.text
if (this.needsInit) {
throw Error('NoteViewController not initialized')
}
if (this.saveTimeout) {
clearTimeout(this.saveTimeout)
}
const noDebounce = params.bypassDebouncer || this.application.noAccount()
const syncDebouceMs = noDebounce
? EditorSaveTimeoutDebounce.ImmediateChange
: this.application.isNativeMobileWeb()
? EditorSaveTimeoutDebounce.NativeMobileWeb
: EditorSaveTimeoutDebounce.Desktop
return new Promise((resolve) => {
this.saveTimeout = setTimeout(() => {
void this.undebouncedSave({ ...params, onLocalPropagationComplete: resolve })
}, syncDebouceMs)
})
}
private async undebouncedSave(params: {
title?: string
text?: string
bypassDebouncer?: boolean
isUserModified?: boolean
dontGeneratePreviews?: boolean
previews?: { previewPlain: string; previewHtml?: string }
customMutate?: (mutator: NoteMutator) => void
onLocalPropagationComplete?: () => void
onRemoteSyncComplete?: () => void
}): Promise<void> {
log(LoggingDomain.NoteView, 'Saving note', params)
const isTemplate = this.isTemplateNote
if (typeof document !== 'undefined' && document.hidden) {
void this.application.alertService.alert(InfoStrings.SavingWhileDocumentHidden)
return
}
if (isTemplate) {
@@ -201,41 +235,37 @@ export class NoteViewController implements ItemViewControllerInterface {
this.item,
(mutator) => {
const noteMutator = mutator as NoteMutator
if (dto.customMutate) {
dto.customMutate(noteMutator)
if (params.customMutate) {
params.customMutate(noteMutator)
}
noteMutator.title = title
noteMutator.text = text
if (!dto.dontUpdatePreviews) {
const noteText = text || ''
if (params.title != undefined) {
noteMutator.title = params.title
}
if (params.text != undefined) {
noteMutator.text = params.text
}
if (params.previews) {
noteMutator.preview_plain = params.previews.previewPlain
noteMutator.preview_html = params.previews.previewHtml
} else if (!params.dontGeneratePreviews && params.text != undefined) {
const noteText = params.text || ''
const truncate = noteText.length > NotePreviewCharLimit
const substring = noteText.substring(0, NotePreviewCharLimit)
const previewPlain = substring + (truncate ? StringEllipses : '')
// eslint-disable-next-line camelcase
noteMutator.preview_plain = previewPlain
// eslint-disable-next-line camelcase
noteMutator.preview_html = undefined
}
},
dto.isUserModified,
params.isUserModified,
)
if (this.saveTimeout) {
clearTimeout(this.saveTimeout)
}
params.onLocalPropagationComplete?.()
const noDebounce = dto.bypassDebouncer || this.application.noAccount()
const syncDebouceMs = noDebounce
? SaveTimeoutDebounc.ImmediateChange
: this.application.isNativeMobileWeb()
? SaveTimeoutDebounc.NativeMobileWeb
: SaveTimeoutDebounc.Desktop
this.saveTimeout = setTimeout(() => {
void this.application.sync.sync()
}, syncDebouceMs)
void this.application.sync.sync().then(() => {
params.onRemoteSyncComplete?.()
})
}
}

2
packages/snjs/lib/Client/TemplateNoteViewControllerOptions.ts → packages/web/src/javascripts/Components/NoteView/Controller/TemplateNoteViewControllerOptions.ts
View File

@@ -1,4 +1,4 @@
import { UuidString } from '@Lib/Types/UuidString'
import { UuidString } from '@standardnotes/snjs'
export type TemplateNoteViewControllerOptions = {
title?: string

2
packages/web/src/javascripts/Components/NoteView/NoteView.test.ts
View File

@@ -8,12 +8,12 @@ import { NotesController } from '@/Controllers/NotesController'
import {
ApplicationEvent,
ProposedSecondsToDeferUILevelSessionExpirationDuringActiveInteraction,
NoteViewController,
SNNote,
NoteType,
PayloadEmitSource,
} from '@standardnotes/snjs'
import NoteView from './NoteView'
import { NoteViewController } from './Controller/NoteViewController'
describe('NoteView', () => {
let noteViewController: NoteViewController

289
packages/web/src/javascripts/Components/NoteView/NoteView.tsx
View File

@@ -16,30 +16,24 @@ import {
ComponentArea,
ComponentViewerInterface,
ContentType,
EditorFontSize,
EditorLineHeight,
isPayloadSourceInternalChange,
isPayloadSourceRetrieved,
NoteType,
NoteViewController,
PayloadEmitSource,
PrefKey,
ProposedSecondsToDeferUILevelSessionExpirationDuringActiveInteraction,
SNComponent,
SNNote,
WebAppEvent,
} from '@standardnotes/snjs'
import { confirmDialog, KeyboardKey, KeyboardModifier } from '@standardnotes/ui-services'
import { ChangeEventHandler, createRef, KeyboardEventHandler, RefObject } from 'react'
import { EditorEventSource } from '../../Types/EditorEventSource'
import { BlockEditor } from '../BlockEditor/BlockEditorComponent'
import { SuperEditor } from './SuperEditor/SuperEditor'
import IndicatorCircle from '../IndicatorCircle/IndicatorCircle'
import LinkedItemBubblesContainer from '../LinkedItems/LinkedItemBubblesContainer'
import LinkedItemsButton from '../LinkedItems/LinkedItemsButton'
import MobileItemsListButton from '../NoteGroupView/MobileItemsListButton'
import EditingDisabledBanner from './EditingDisabledBanner'
import { reloadFont } from './FontFunctions'
import { getPlaintextFontSize } from '../../Utils/getPlaintextFontSize'
import NoteStatusIndicator, { NoteStatus } from './NoteStatusIndicator'
import NoteViewFileDropTarget from './NoteViewFileDropTarget'
import { NoteViewProps } from './NoteViewProps'
@@ -48,9 +42,10 @@ import {
transactionForDisassociateComponentWithCurrentNote,
} from './TransactionFunctions'
import { SuperEditorContentId } from '@standardnotes/blocks-editor'
import { NoteViewController } from './Controller/NoteViewController'
import { PlainEditor, PlainEditorInterface } from './PlainEditor/PlainEditor'
const MinimumStatusDuration = 400
const TextareaDebounce = 100
const NoteEditingDisabledText = 'Note editing disabled.'
function sortAlphabetically(array: SNComponent[]): SNComponent[] {
@@ -63,7 +58,6 @@ type State = {
editorComponentViewerDidAlreadyReload?: boolean
editorStateDidLoad: boolean
editorTitle: string
editorText: string
isDesktop?: boolean
lockText: string
marginResizersEnabled?: boolean
@@ -75,21 +69,14 @@ type State = {
spellcheck: boolean
stackComponentViewers: ComponentViewerInterface[]
syncTakingTooLong: boolean
/** Setting to true then false will allow the main content textarea to be destroyed
* then re-initialized. Used when reloading spellcheck status. */
textareaUnloading: boolean
plaintextEditorFocused?: boolean
monospaceFont?: boolean
plainEditorFocused?: boolean
leftResizerWidth: number
leftResizerOffset: number
rightResizerWidth: number
rightResizerOffset: number
monospaceFont?: boolean
lineHeight?: EditorLineHeight
fontSize?: EditorFontSize
updateSavingIndicator?: boolean
editorFeatureIdentifier?: string
noteType?: NoteType
}
@@ -98,23 +85,17 @@ class NoteView extends AbstractComponent<NoteViewProps, State> {
readonly controller!: NoteViewController
private statusTimeout?: NodeJS.Timeout
private lastEditorFocusEventSource?: EditorEventSource
onEditorComponentLoad?: () => void
private removeTrashKeyObserver?: () => void
private removeTabObserver?: () => void
private removeComponentStreamObserver?: () => void
private removeComponentManagerObserver?: () => void
private removeInnerNoteObserver?: () => void
private removeWebAppEventObserver: () => void
private needsAdjustMobileCursor = false
private isAdjustingMobileCursor = false
private protectionTimeoutId: ReturnType<typeof setTimeout> | null = null
private noteViewElementRef: RefObject<HTMLDivElement>
private editorContentRef: RefObject<HTMLDivElement>
private plainEditorRef?: RefObject<PlainEditorInterface>
constructor(props: NoteViewProps) {
super(props, props.application)
@@ -130,18 +111,9 @@ class NoteView extends AbstractComponent<NoteViewProps, State> {
this.debounceReloadEditorComponent = debounce(this.debounceReloadEditorComponent.bind(this), 25)
this.textAreaChangeDebounceSave = debounce(this.textAreaChangeDebounceSave, TextareaDebounce)
this.removeWebAppEventObserver = props.application.addWebEventObserver((event) => {
if (event === WebAppEvent.MobileKeyboardWillChangeFrame) {
this.scrollMobileCursorIntoViewAfterWebviewResize()
}
})
this.state = {
availableStackComponents: [],
editorStateDidLoad: false,
editorText: '',
editorTitle: '',
isDesktop: isDesktopApplication(),
lockText: NoteEditingDisabledText,
@@ -152,7 +124,6 @@ class NoteView extends AbstractComponent<NoteViewProps, State> {
spellcheck: true,
stackComponentViewers: [],
syncTakingTooLong: false,
textareaUnloading: false,
leftResizerWidth: 0,
leftResizerOffset: 0,
rightResizerWidth: 0,
@@ -165,16 +136,6 @@ class NoteView extends AbstractComponent<NoteViewProps, State> {
this.editorContentRef = createRef<HTMLDivElement>()
}
scrollMobileCursorIntoViewAfterWebviewResize() {
if (this.needsAdjustMobileCursor) {
this.needsAdjustMobileCursor = false
this.isAdjustingMobileCursor = true
document.getElementById('note-text-editor')?.blur()
document.getElementById('note-text-editor')?.focus()
this.isAdjustingMobileCursor = false
}
}
override deinit() {
super.deinit()
;(this.controller as unknown) = undefined
@@ -194,28 +155,20 @@ class NoteView extends AbstractComponent<NoteViewProps, State> {
this.clearNoteProtectionInactivityTimer()
;(this.ensureNoteIsInsertedBeforeUIAction as unknown) = undefined
this.removeWebAppEventObserver?.()
;(this.removeWebAppEventObserver as unknown) = undefined
this.removeTabObserver?.()
this.removeTabObserver = undefined
this.onEditorComponentLoad = undefined
this.statusTimeout = undefined
;(this.onPanelResizeFinish as unknown) = undefined
;(this.authorizeAndDismissProtectedWarning as unknown) = undefined
;(this.editorComponentViewerRequestsReload as unknown) = undefined
;(this.onTextAreaChange as unknown) = undefined
;(this.onTitleEnter as unknown) = undefined
;(this.onTitleChange as unknown) = undefined
;(this.onContentFocus as unknown) = undefined
;(this.onPanelResizeFinish as unknown) = undefined
;(this.stackComponentExpanded as unknown) = undefined
;(this.toggleStackComponent as unknown) = undefined
;(this.onSystemEditorRef as unknown) = undefined
;(this.debounceReloadEditorComponent as unknown) = undefined
;(this.textAreaChangeDebounceSave as unknown) = undefined
;(this.editorContentRef as unknown) = undefined
;(this.plainEditorRef as unknown) = undefined
}
getState() {
@@ -271,9 +224,7 @@ class NoteView extends AbstractComponent<NoteViewProps, State> {
if (this.controller.isTemplateNote) {
setTimeout(() => {
if (this.controller.templateNoteOptions?.autofocusBehavior === 'editor') {
this.focusEditor()
} else {
if (this.controller.templateNoteOptions?.autofocusBehavior === 'title') {
this.focusTitle()
}
})
@@ -296,34 +247,22 @@ class NoteView extends AbstractComponent<NoteViewProps, State> {
throw Error('Editor received changes for non-current note')
}
let title = this.state.editorTitle,
text = this.state.editorText
let title = this.state.editorTitle
if (isPayloadSourceRetrieved(source)) {
title = note.title
text = note.text
}
if (!this.state.editorTitle) {
title = note.title
}
if (!this.state.editorText) {
text = note.text
}
if (title !== this.state.editorTitle) {
this.setState({
editorTitle: title,
})
}
if (text !== this.state.editorText) {
this.setState({
editorText: text,
})
}
if (note.locked !== this.state.noteLocked) {
this.setState({
noteLocked: note.locked,
@@ -334,7 +273,6 @@ class NoteView extends AbstractComponent<NoteViewProps, State> {
this.setState({
editorFeatureIdentifier: note.editorIdentifier,
noteType: note.noteType,
editorText: note.text,
editorTitle: note.title,
})
@@ -625,36 +563,13 @@ class NoteView extends AbstractComponent<NoteViewProps, State> {
}
}
onTextAreaChange: ChangeEventHandler<HTMLTextAreaElement> = ({ currentTarget }) => {
const text = currentTarget.value
this.setState({
editorText: text,
})
this.textAreaChangeDebounceSave()
}
textAreaChangeDebounceSave = () => {
log(LoggingDomain.NoteView, 'Performing save after debounce')
this.controller
.save({
editorValues: {
title: this.state.editorTitle,
text: this.state.editorText,
},
isUserModified: true,
})
.catch(console.error)
}
onTitleEnter: KeyboardEventHandler<HTMLInputElement> = ({ key, currentTarget }) => {
if (key !== KeyboardKey.Enter) {
return
}
currentTarget.blur()
this.focusEditor()
this.plainEditorRef?.current?.focus()
}
onTitleChange: ChangeEventHandler<HTMLInputElement> = ({ currentTarget }) => {
@@ -667,49 +582,18 @@ class NoteView extends AbstractComponent<NoteViewProps, State> {
})
this.controller
.save({
editorValues: {
title: title,
text: this.state.editorText,
},
.saveAndAwaitLocalPropagation({
title: title,
isUserModified: true,
dontUpdatePreviews: true,
dontGeneratePreviews: true,
})
.catch(console.error)
}
focusEditor() {
const element = document.getElementById(ElementIds.NoteTextEditor)
if (element) {
this.lastEditorFocusEventSource = EditorEventSource.Script
element.focus()
}
}
focusTitle() {
document.getElementById(ElementIds.NoteTitleEditor)?.focus()
}
onContentFocus = () => {
if (!this.isAdjustingMobileCursor) {
this.needsAdjustMobileCursor = true
}
if (this.lastEditorFocusEventSource) {
this.application.notifyWebEvent(WebAppEvent.EditorFocused, { eventSource: this.lastEditorFocusEventSource })
}
this.lastEditorFocusEventSource = undefined
this.setState({ plaintextEditorFocused: true })
}
onContentBlur = () => {
if (this.lastEditorFocusEventSource) {
this.application.notifyWebEvent(WebAppEvent.EditorFocused, { eventSource: this.lastEditorFocusEventSource })
}
this.lastEditorFocusEventSource = undefined
this.setState({ plaintextEditorFocused: false })
}
setShowProtectedOverlay(show: boolean) {
this.viewControllerManager.notesController.setShowProtectedWarning(show)
}
@@ -737,13 +621,11 @@ class NoteView extends AbstractComponent<NoteViewProps, State> {
this.performNoteDeletion(this.note)
} else {
this.controller
.save({
editorValues: {
title: this.state.editorTitle,
text: this.state.editorText,
},
.saveAndAwaitLocalPropagation({
title: this.state.editorTitle,
bypassDebouncer: true,
dontUpdatePreviews: true,
dontGeneratePreviews: true,
isUserModified: true,
customMutate: (mutator) => {
mutator.trashed = true
},
@@ -773,15 +655,9 @@ class NoteView extends AbstractComponent<NoteViewProps, State> {
async reloadSpellcheck() {
const spellcheck = this.viewControllerManager.notesController.getSpellcheckStateForNote(this.note)
if (spellcheck !== this.state.spellcheck) {
this.setState({ textareaUnloading: true })
this.setState({ textareaUnloading: false })
reloadFont(this.state.monospaceFont)
this.setState({
spellcheck,
})
this.setState({ spellcheck })
}
}
@@ -797,10 +673,6 @@ class NoteView extends AbstractComponent<NoteViewProps, State> {
PrefDefaults[PrefKey.EditorResizersEnabled],
)
const lineHeight = this.application.getPreference(PrefKey.EditorLineHeight, PrefDefaults[PrefKey.EditorLineHeight])
const fontSize = this.application.getPreference(PrefKey.EditorFontSize, PrefDefaults[PrefKey.EditorFontSize])
const updateSavingIndicator = this.application.getPreference(
PrefKey.UpdateSavingStatusIndicator,
PrefDefaults[PrefKey.UpdateSavingStatusIndicator],
@@ -811,8 +683,7 @@ class NoteView extends AbstractComponent<NoteViewProps, State> {
this.setState({
monospaceFont,
marginResizersEnabled,
lineHeight,
fontSize,
updateSavingIndicator,
})
@@ -904,82 +775,20 @@ class NoteView extends AbstractComponent<NoteViewProps, State> {
})
}
onSystemEditorRef = (ref: HTMLTextAreaElement | null) => {
if (this.removeTabObserver || !ref) {
return
}
log(LoggingDomain.NoteView, 'On system editor ref')
/**
* Insert 4 spaces when a tab key is pressed,
* only used when inside of the text editor.
* If the shift key is pressed first, this event is
* not fired.
*/
const editor = document.getElementById(ElementIds.NoteTextEditor) as HTMLInputElement
if (!editor) {
console.error('Editor is not yet mounted; unable to add tab observer.')
return
}
this.removeTabObserver = this.application.io.addKeyObserver({
element: editor,
key: KeyboardKey.Tab,
onKeyDown: (event) => {
if (document.hidden || this.note.locked || event.shiftKey) {
return
}
event.preventDefault()
/** Using document.execCommand gives us undo support */
const insertSuccessful = document.execCommand('insertText', false, '\t')
if (!insertSuccessful) {
/** document.execCommand works great on Chrome/Safari but not Firefox */
const start = editor.selectionStart || 0
const end = editor.selectionEnd || 0
const spaces = ' '
/** Insert 4 spaces */
editor.value = editor.value.substring(0, start) + spaces + editor.value.substring(end)
/** Place cursor 4 spaces away from where the tab key was pressed */
editor.selectionStart = editor.selectionEnd = start + 4
}
this.setState({
editorText: editor.value,
})
this.controller
.save({
editorValues: {
title: this.state.editorTitle,
text: this.state.editorText,
},
bypassDebouncer: true,
})
.catch(console.error)
},
})
const observer = new MutationObserver((records) => {
for (const record of records) {
record.removedNodes.forEach((node) => {
if (node === editor) {
this.removeTabObserver?.()
this.removeTabObserver = undefined
}
})
}
})
observer.observe(editor.parentElement as HTMLElement, { childList: true })
}
ensureNoteIsInsertedBeforeUIAction = async () => {
if (this.controller.isTemplateNote) {
await this.controller.insertTemplatedNote()
}
}
onPlainFocus = () => {
this.setState({ plainEditorFocused: true })
}
onPlainBlur = () => {
this.setState({ plainEditorFocused: false })
}
override render() {
if (this.controller.dealloced) {
return null
@@ -996,12 +805,12 @@ class NoteView extends AbstractComponent<NoteViewProps, State> {
)
}
const renderHeaderOptions = isMobileScreen() ? !this.state.plaintextEditorFocused : true
const renderHeaderOptions = isMobileScreen() ? !this.state.plainEditorFocused : true
const editorMode =
this.note.noteType === NoteType.Blocks
? 'blocks'
: this.state.editorStateDidLoad && !this.state.editorComponentViewer && !this.state.textareaUnloading
this.note.noteType === NoteType.Super
? 'super'
: this.state.editorStateDidLoad && !this.state.editorComponentViewer
? 'plain'
: this.state.editorComponentViewer
? 'component'
@@ -1095,7 +904,7 @@ class NoteView extends AbstractComponent<NoteViewProps, State> {
</div>
)}
</div>
{editorMode !== 'blocks' && (
{editorMode !== 'super' && (
<LinkedItemBubblesContainer linkingController={this.viewControllerManager.linkingController} />
)}
</div>
@@ -1103,7 +912,7 @@ class NoteView extends AbstractComponent<NoteViewProps, State> {
<div
id={ElementIds.EditorContent}
className={`${ElementIds.EditorContent} z-editor-content overflow-scroll`}
className={`${ElementIds.EditorContent} z-editor-content overflow-auto`}
ref={this.editorContentRef}
>
{this.state.marginResizersEnabled && this.editorContentRef.current ? (
@@ -1133,34 +942,26 @@ class NoteView extends AbstractComponent<NoteViewProps, State> {
)}
{editorMode === 'plain' && (
<textarea
autoComplete="off"
dir="auto"
id={ElementIds.NoteTextEditor}
onChange={this.onTextAreaChange}
onFocus={this.onContentFocus}
onBlur={this.onContentBlur}
readOnly={this.state.noteLocked}
ref={(ref) => ref && this.onSystemEditorRef(ref)}
spellCheck={this.state.spellcheck}
value={this.state.editorText}
className={classNames(
'editable font-editor flex-grow',
this.state.lineHeight && `leading-${this.state.lineHeight.toLowerCase()}`,
this.state.fontSize && getPlaintextFontSize(this.state.fontSize),
)}
></textarea>
<PlainEditor
application={this.application}
spellcheck={this.state.spellcheck}
ref={this.plainEditorRef}
controller={this.controller}
locked={this.state.noteLocked}
onFocus={this.onPlainFocus}
onBlur={this.onPlainBlur}
/>
)}
{editorMode === 'blocks' && (
{editorMode === 'super' && (
<div className={classNames('blocks-editor w-full flex-grow overflow-hidden overflow-y-scroll')}>
<BlockEditor
<SuperEditor
key={this.note.uuid}
application={this.application}
note={this.note}
linkingController={this.viewControllerManager.linkingController}
filesController={this.viewControllerManager.filesController}
spellcheck={this.state.spellcheck}
controller={this.controller}
/>
</div>
)}

3
packages/web/src/javascripts/Components/NoteView/NoteViewProps.ts
View File

@@ -1,6 +1,5 @@
import { NoteViewController } from '@standardnotes/snjs'
import { WebApplication } from '@/Application/Application'
import { NoteViewController } from './Controller/NoteViewController'
export interface NoteViewProps {
application: WebApplication

253
packages/web/src/javascripts/Components/NoteView/PlainEditor/PlainEditor.tsx Normal file
View File

@@ -0,0 +1,253 @@
import { WebApplication } from '@/Application/Application'
import { usePrevious } from '@/Components/ContentListView/Calendar/usePrevious'
import { ElementIds } from '@/Constants/ElementIDs'
import { PrefDefaults } from '@/Constants/PrefDefaults'
import { log, LoggingDomain } from '@/Logging'
import { Disposer } from '@/Types/Disposer'
import { EditorEventSource } from '@/Types/EditorEventSource'
import { classNames } from '@/Utils/ConcatenateClassNames'
import { getPlaintextFontSize } from '@/Utils/getPlaintextFontSize'
import {
ApplicationEvent,
EditorFontSize,
EditorLineHeight,
isPayloadSourceRetrieved,
PrefKey,
WebAppEvent,
} from '@standardnotes/snjs'
import { KeyboardKey } from '@standardnotes/ui-services'
import { ChangeEventHandler, forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react'
import { NoteViewController } from '../Controller/NoteViewController'
type Props = {
application: WebApplication
spellcheck: boolean
controller: NoteViewController
locked: boolean
onFocus: () => void
onBlur: () => void
}
export type PlainEditorInterface = {
focus: () => void
}
export const PlainEditor = forwardRef<PlainEditorInterface, Props>(
({ application, spellcheck, controller, locked, onFocus, onBlur }: Props, ref) => {
const [editorText, setEditorText] = useState<string | undefined>()
const [textareaUnloading, setTextareaUnloading] = useState(false)
const [lineHeight, setLineHeight] = useState<EditorLineHeight | undefined>()
const [fontSize, setFontSize] = useState<EditorFontSize | undefined>()
const previousSpellcheck = usePrevious(spellcheck)
const lastEditorFocusEventSource = useRef<EditorEventSource | undefined>()
const needsAdjustMobileCursor = useRef(false)
const isAdjustingMobileCursor = useRef(false)
const note = useRef(controller.item)
const tabObserverDisposer = useRef<Disposer>()
useImperativeHandle(ref, () => ({
focus() {
focusEditor()
},
}))
useEffect(() => {
const disposer = controller.addNoteInnerValueChangeObserver((updatedNote, source) => {
if (updatedNote.uuid !== note.current.uuid) {
throw Error('Editor received changes for non-current note')
}
if (
isPayloadSourceRetrieved(source) ||
editorText == undefined ||
updatedNote.editorIdentifier !== note.current.editorIdentifier ||
updatedNote.noteType !== note.current.noteType
) {
setEditorText(updatedNote.text)
}
note.current = updatedNote
})
return disposer
}, [controller, editorText, controller.item.uuid, controller.item.editorIdentifier, controller.item.noteType])
const onTextAreaChange: ChangeEventHandler<HTMLTextAreaElement> = ({ currentTarget }) => {
const text = currentTarget.value
setEditorText(text)
void controller.saveAndAwaitLocalPropagation({ text: text, isUserModified: true })
}
const onContentFocus = useCallback(() => {
if (!isAdjustingMobileCursor.current) {
needsAdjustMobileCursor.current = true
}
if (lastEditorFocusEventSource.current) {
application.notifyWebEvent(WebAppEvent.EditorFocused, { eventSource: lastEditorFocusEventSource })
}
lastEditorFocusEventSource.current = undefined
onFocus()
}, [application, isAdjustingMobileCursor, lastEditorFocusEventSource, onFocus])
const onContentBlur = useCallback(() => {
if (lastEditorFocusEventSource.current) {
application.notifyWebEvent(WebAppEvent.EditorFocused, { eventSource: lastEditorFocusEventSource })
}
lastEditorFocusEventSource.current = undefined
onBlur()
}, [application, lastEditorFocusEventSource, onBlur])
const scrollMobileCursorIntoViewAfterWebviewResize = useCallback(() => {
if (needsAdjustMobileCursor.current) {
needsAdjustMobileCursor.current = false
isAdjustingMobileCursor.current = true
document.getElementById('note-text-editor')?.blur()
document.getElementById('note-text-editor')?.focus()
isAdjustingMobileCursor.current = false
}
}, [needsAdjustMobileCursor])
useEffect(() => {
const disposer = application.addWebEventObserver((event) => {
if (event === WebAppEvent.MobileKeyboardWillChangeFrame) {
scrollMobileCursorIntoViewAfterWebviewResize()
}
})
return disposer
}, [application, scrollMobileCursorIntoViewAfterWebviewResize])
const focusEditor = useCallback(() => {
const element = document.getElementById(ElementIds.NoteTextEditor)
if (element) {
lastEditorFocusEventSource.current = EditorEventSource.Script
element.focus()
}
}, [])
useEffect(() => {
if (controller.isTemplateNote && controller.templateNoteOptions?.autofocusBehavior === 'editor') {
setTimeout(() => {
focusEditor()
})
}
}, [controller, focusEditor])
const reloadPreferences = useCallback(() => {
const lineHeight = application.getPreference(PrefKey.EditorLineHeight, PrefDefaults[PrefKey.EditorLineHeight])
const fontSize = application.getPreference(PrefKey.EditorFontSize, PrefDefaults[PrefKey.EditorFontSize])
setLineHeight(lineHeight)
setFontSize(fontSize)
}, [application])
useEffect(() => {
reloadPreferences()
return application.addSingleEventObserver(ApplicationEvent.PreferencesChanged, async () => {
reloadPreferences()
})
}, [reloadPreferences, application])
useEffect(() => {
if (spellcheck !== previousSpellcheck) {
setTextareaUnloading(true)
setTimeout(() => {
setTextareaUnloading(false)
}, 0)
}
}, [spellcheck, previousSpellcheck])
const onRef = (ref: HTMLTextAreaElement | null) => {
if (tabObserverDisposer.current || !ref) {
return
}
log(LoggingDomain.NoteView, 'On system editor ref')
/**
* Insert 4 spaces when a tab key is pressed, only used when inside of the text editor.
* If the shift key is pressed first, this event is not fired.
*/
const editor = document.getElementById(ElementIds.NoteTextEditor) as HTMLInputElement
if (!editor) {
console.error('Editor is not yet mounted; unable to add tab observer.')
return
}
tabObserverDisposer.current = application.io.addKeyObserver({
element: editor,
key: KeyboardKey.Tab,
onKeyDown: (event) => {
if (document.hidden || note.current.locked || event.shiftKey) {
return
}
event.preventDefault()
/** Using document.execCommand gives us undo support */
const insertSuccessful = document.execCommand('insertText', false, '\t')
if (!insertSuccessful) {
/** document.execCommand works great on Chrome/Safari but not Firefox */
const start = editor.selectionStart || 0
const end = editor.selectionEnd || 0
const spaces = ' '
/** Insert 4 spaces */
editor.value = editor.value.substring(0, start) + spaces + editor.value.substring(end)
/** Place cursor 4 spaces away from where the tab key was pressed */
editor.selectionStart = editor.selectionEnd = start + 4
}
setEditorText(editor.value)
void controller.saveAndAwaitLocalPropagation({
text: editor.value,
bypassDebouncer: true,
isUserModified: true,
})
},
})
const observer = new MutationObserver((records) => {
for (const record of records) {
record.removedNodes.forEach((node) => {
if (node === editor) {
tabObserverDisposer.current?.()
tabObserverDisposer.current = undefined
}
})
}
})
observer.observe(editor.parentElement as HTMLElement, { childList: true })
}
if (textareaUnloading) {
return null
}
return (
<textarea
autoComplete="off"
dir="auto"
id={ElementIds.NoteTextEditor}
onChange={onTextAreaChange}
onFocus={onContentFocus}
onBlur={onContentBlur}
readOnly={locked}
ref={(ref) => ref && onRef(ref)}
spellCheck={spellcheck}
value={editorText}
className={classNames(
'editable font-editor flex-grow',
lineHeight && `leading-${lineHeight.toLowerCase()}`,
fontSize && getPlaintextFontSize(fontSize),
)}
></textarea>
)
},
)

0
packages/web/src/javascripts/Components/BlockEditor/Plugins/AutoLinkPlugin/AutoLinkPlugin.tsx → packages/web/src/javascripts/Components/NoteView/SuperEditor/Plugins/AutoLinkPlugin/AutoLinkPlugin.tsx
View File

0
packages/web/src/javascripts/Components/BlockEditor/Plugins/BlockPickerPlugin/BlockPickerMenuItem.tsx → packages/web/src/javascripts/Components/NoteView/SuperEditor/Plugins/BlockPickerPlugin/BlockPickerMenuItem.tsx
View File

0
packages/web/src/javascripts/Components/BlockEditor/Plugins/BlockPickerPlugin/BlockPickerOption.tsx → packages/web/src/javascripts/Components/NoteView/SuperEditor/Plugins/BlockPickerPlugin/BlockPickerOption.tsx
View File

0
packages/web/src/javascripts/Components/BlockEditor/Plugins/BlockPickerPlugin/BlockPickerPlugin.tsx → packages/web/src/javascripts/Components/NoteView/SuperEditor/Plugins/BlockPickerPlugin/BlockPickerPlugin.tsx
View File

0
packages/web/src/javascripts/Components/BlockEditor/Plugins/BlockPickerPlugin/Blocks/Alignment.tsx → packages/web/src/javascripts/Components/NoteView/SuperEditor/Plugins/BlockPickerPlugin/Blocks/Alignment.tsx
View File

0
packages/web/src/javascripts/Components/BlockEditor/Plugins/BlockPickerPlugin/Blocks/BulletedList.tsx → packages/web/src/javascripts/Components/NoteView/SuperEditor/Plugins/BlockPickerPlugin/Blocks/BulletedList.tsx
View File

0
packages/web/src/javascripts/Components/BlockEditor/Plugins/BlockPickerPlugin/Blocks/Checklist.tsx → packages/web/src/javascripts/Components/NoteView/SuperEditor/Plugins/BlockPickerPlugin/Blocks/Checklist.tsx
View File

0
packages/web/src/javascripts/Components/BlockEditor/Plugins/BlockPickerPlugin/Blocks/Code.tsx → packages/web/src/javascripts/Components/NoteView/SuperEditor/Plugins/BlockPickerPlugin/Blocks/Code.tsx
View File

0
packages/web/src/javascripts/Components/BlockEditor/Plugins/BlockPickerPlugin/Blocks/Collapsible.tsx → packages/web/src/javascripts/Components/NoteView/SuperEditor/Plugins/BlockPickerPlugin/Blocks/Collapsible.tsx
View File

0
packages/web/src/javascripts/Components/BlockEditor/Plugins/BlockPickerPlugin/Blocks/DateTime.tsx → packages/web/src/javascripts/Components/NoteView/SuperEditor/Plugins/BlockPickerPlugin/Blocks/DateTime.tsx
View File

0
packages/web/src/javascripts/Components/BlockEditor/Plugins/BlockPickerPlugin/Blocks/Divider.tsx → packages/web/src/javascripts/Components/NoteView/SuperEditor/Plugins/BlockPickerPlugin/Blocks/Divider.tsx
View File

0
packages/web/src/javascripts/Components/BlockEditor/Plugins/BlockPickerPlugin/Blocks/Embeds.tsx → packages/web/src/javascripts/Components/NoteView/SuperEditor/Plugins/BlockPickerPlugin/Blocks/Embeds.tsx
View File

0
packages/web/src/javascripts/Components/BlockEditor/Plugins/BlockPickerPlugin/Blocks/Headings.tsx → packages/web/src/javascripts/Components/NoteView/SuperEditor/Plugins/BlockPickerPlugin/Blocks/Headings.tsx
View File

0
packages/web/src/javascripts/Components/BlockEditor/Plugins/BlockPickerPlugin/Blocks/NumberedList.tsx → packages/web/src/javascripts/Components/NoteView/SuperEditor/Plugins/BlockPickerPlugin/Blocks/NumberedList.tsx
View File

0
packages/web/src/javascripts/Components/BlockEditor/Plugins/BlockPickerPlugin/Blocks/Paragraph.tsx → packages/web/src/javascripts/Components/NoteView/SuperEditor/Plugins/BlockPickerPlugin/Blocks/Paragraph.tsx
View File

0
packages/web/src/javascripts/Components/BlockEditor/Plugins/BlockPickerPlugin/Blocks/Quote.tsx → packages/web/src/javascripts/Components/NoteView/SuperEditor/Plugins/BlockPickerPlugin/Blocks/Quote.tsx
View File

0
packages/web/src/javascripts/Components/BlockEditor/Plugins/BlockPickerPlugin/Blocks/Table.tsx → packages/web/src/javascripts/Components/NoteView/SuperEditor/Plugins/BlockPickerPlugin/Blocks/Table.tsx
View File

26
packages/web/src/javascripts/Components/NoteView/SuperEditor/Plugins/ChangeContentCallback/ChangeContentCallback.tsx Normal file
View File

@@ -0,0 +1,26 @@
import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
import { useEffect } from 'react'
export type ChangeEditorFunction = (jsonContent: string) => void
type ChangeEditorFunctionProvider = (changeEditorFunction: ChangeEditorFunction) => void
export function ChangeContentCallbackPlugin({
providerCallback,
}: {
providerCallback: ChangeEditorFunctionProvider
}): JSX.Element | null {
const [editor] = useLexicalComposerContext()
useEffect(() => {
const changeContents: ChangeEditorFunction = (jsonContent: string) => {
editor.update(() => {
const editorState = editor.parseEditorState(jsonContent)
editor.setEditorState(editorState)
})
}
providerCallback(changeContents)
}, [editor, providerCallback])
return null
}

0
packages/web/src/javascripts/Components/BlockEditor/Plugins/ClassNames.ts → packages/web/src/javascripts/Components/NoteView/SuperEditor/Plugins/ClassNames.ts
View File

0
packages/web/src/javascripts/Components/BlockEditor/Plugins/Commands.ts → packages/web/src/javascripts/Components/NoteView/SuperEditor/Plugins/Commands.ts
View File

0
packages/web/src/javascripts/Components/BlockEditor/Plugins/DateTimePlugin/DateTimePlugin.tsx → packages/web/src/javascripts/Components/NoteView/SuperEditor/Plugins/DateTimePlugin/DateTimePlugin.tsx
View File

2
packages/web/src/javascripts/Components/BlockEditor/Plugins/EncryptedFilePlugin/FilePlugin.ts → packages/web/src/javascripts/Components/NoteView/SuperEditor/Plugins/EncryptedFilePlugin/FilePlugin.ts
View File

@@ -1,4 +1,4 @@
import { INSERT_FILE_COMMAND } from './../Commands'
import { INSERT_FILE_COMMAND } from '../Commands'
import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
import { useEffect } from 'react'

0
packages/web/src/javascripts/Components/BlockEditor/Plugins/EncryptedFilePlugin/Nodes/FileComponent.tsx → packages/web/src/javascripts/Components/NoteView/SuperEditor/Plugins/EncryptedFilePlugin/Nodes/FileComponent.tsx
View File

0
packages/web/src/javascripts/Components/BlockEditor/Plugins/EncryptedFilePlugin/Nodes/FileNode.tsx → packages/web/src/javascripts/Components/NoteView/SuperEditor/Plugins/EncryptedFilePlugin/Nodes/FileNode.tsx
View File

0
packages/web/src/javascripts/Components/BlockEditor/Plugins/EncryptedFilePlugin/Nodes/FileUtils.tsx → packages/web/src/javascripts/Components/NoteView/SuperEditor/Plugins/EncryptedFilePlugin/Nodes/FileUtils.tsx
View File

0
packages/web/src/javascripts/Components/BlockEditor/Plugins/EncryptedFilePlugin/Nodes/SerializedFileNode.tsx → packages/web/src/javascripts/Components/NoteView/SuperEditor/Plugins/EncryptedFilePlugin/Nodes/SerializedFileNode.tsx
View File

0
packages/web/src/javascripts/Components/BlockEditor/Plugins/ImportPlugin/ImportPlugin.tsx → packages/web/src/javascripts/Components/NoteView/SuperEditor/Plugins/ImportPlugin/ImportPlugin.tsx
View File

0
packages/web/src/javascripts/Components/BlockEditor/Plugins/ItemBubblePlugin/ItemBubblePlugin.ts → packages/web/src/javascripts/Components/NoteView/SuperEditor/Plugins/ItemBubblePlugin/ItemBubblePlugin.ts
View File

0
packages/web/src/javascripts/Components/BlockEditor/Plugins/ItemBubblePlugin/Nodes/BubbleComponent.tsx → packages/web/src/javascripts/Components/NoteView/SuperEditor/Plugins/ItemBubblePlugin/Nodes/BubbleComponent.tsx
View File

0
packages/web/src/javascripts/Components/BlockEditor/Plugins/ItemBubblePlugin/Nodes/BubbleNode.tsx → packages/web/src/javascripts/Components/NoteView/SuperEditor/Plugins/ItemBubblePlugin/Nodes/BubbleNode.tsx
View File

0
packages/web/src/javascripts/Components/BlockEditor/Plugins/ItemBubblePlugin/Nodes/BubbleUtils.tsx → packages/web/src/javascripts/Components/NoteView/SuperEditor/Plugins/ItemBubblePlugin/Nodes/BubbleUtils.tsx
View File

0
packages/web/src/javascripts/Components/BlockEditor/Plugins/ItemBubblePlugin/Nodes/SerializedBubbleNode.tsx → packages/web/src/javascripts/Components/NoteView/SuperEditor/Plugins/ItemBubblePlugin/Nodes/SerializedBubbleNode.tsx
View File

0
packages/web/src/javascripts/Components/BlockEditor/Plugins/ItemNodeInterface.ts → packages/web/src/javascripts/Components/NoteView/SuperEditor/Plugins/ItemNodeInterface.ts
View File

0
packages/web/src/javascripts/Components/BlockEditor/Plugins/ItemSelectionPlugin/ItemOption.ts → packages/web/src/javascripts/Components/NoteView/SuperEditor/Plugins/ItemSelectionPlugin/ItemOption.ts
View File

0
packages/web/src/javascripts/Components/BlockEditor/Plugins/ItemSelectionPlugin/ItemSelectionItemComponent.tsx → packages/web/src/javascripts/Components/NoteView/SuperEditor/Plugins/ItemSelectionPlugin/ItemSelectionItemComponent.tsx
View File

2
packages/web/src/javascripts/Components/BlockEditor/Plugins/ItemSelectionPlugin/ItemSelectionPlugin.tsx → packages/web/src/javascripts/Components/NoteView/SuperEditor/Plugins/ItemSelectionPlugin/ItemSelectionPlugin.tsx
View File

@@ -9,7 +9,7 @@ import { ContentType, SNNote } from '@standardnotes/snjs'
import { getLinkingSearchResults } from '@/Utils/Items/Search/getSearchResults'
import Popover from '@/Components/Popover/Popover'
import { INSERT_BUBBLE_COMMAND, INSERT_FILE_COMMAND } from '../Commands'
import { useLinkingController } from '../../../../Controllers/LinkingControllerProvider'
import { useLinkingController } from '../../../../../Controllers/LinkingControllerProvider'
import { PopoverClassNames } from '../ClassNames'
type Props = {

0
packages/web/src/javascripts/Components/BlockEditor/Plugins/NodeObserverPlugin/NodeObserverPlugin.tsx → packages/web/src/javascripts/Components/NoteView/SuperEditor/Plugins/NodeObserverPlugin/NodeObserverPlugin.tsx
View File

69
packages/web/src/javascripts/Components/BlockEditor/BlockEditorComponent.tsx → packages/web/src/javascripts/Components/NoteView/SuperEditor/SuperEditor.tsx
View File

@@ -1,7 +1,6 @@
import { WebApplication } from '@/Application/Application'
import { SNNote } from '@standardnotes/snjs'
import { FunctionComponent, useCallback, useRef } from 'react'
import { BlockEditorController } from './BlockEditorController'
import { isPayloadSourceRetrieved } from '@standardnotes/snjs'
import { FunctionComponent, useCallback, useEffect, useRef } from 'react'
import { BlocksEditor, BlocksEditorComposer } from '@standardnotes/blocks-editor'
import { ItemSelectionPlugin } from './Plugins/ItemSelectionPlugin/ItemSelectionPlugin'
import { FileNode } from './Plugins/EncryptedFilePlugin/Nodes/FileNode'
@@ -9,7 +8,7 @@ import FilePlugin from './Plugins/EncryptedFilePlugin/FilePlugin'
import BlockPickerMenuPlugin from './Plugins/BlockPickerPlugin/BlockPickerPlugin'
import { ErrorBoundary } from '@/Utils/ErrorBoundary'
import { LinkingController } from '@/Controllers/LinkingController'
import LinkingControllerProvider from '../../Controllers/LinkingControllerProvider'
import LinkingControllerProvider from '../../../Controllers/LinkingControllerProvider'
import { BubbleNode } from './Plugins/ItemBubblePlugin/Nodes/BubbleNode'
import ItemBubblePlugin from './Plugins/ItemBubblePlugin/ItemBubblePlugin'
import { NodeObserverPlugin } from './Plugins/NodeObserverPlugin/NodeObserverPlugin'
@@ -17,29 +16,48 @@ import { FilesController } from '@/Controllers/FilesController'
import FilesControllerProvider from '@/Controllers/FilesControllerProvider'
import DatetimePlugin from './Plugins/DateTimePlugin/DateTimePlugin'
import AutoLinkPlugin from './Plugins/AutoLinkPlugin/AutoLinkPlugin'
import { NoteViewController } from '../Controller/NoteViewController'
import {
ChangeContentCallbackPlugin,
ChangeEditorFunction,
} from './Plugins/ChangeContentCallback/ChangeContentCallback'
const NotePreviewCharLimit = 160
type Props = {
application: WebApplication
note: SNNote
controller: NoteViewController
linkingController: LinkingController
filesController: FilesController
spellcheck: boolean
}
export const BlockEditor: FunctionComponent<Props> = ({
note,
export const SuperEditor: FunctionComponent<Props> = ({
application,
linkingController,
filesController,
spellcheck,
controller,
}) => {
const controller = useRef(new BlockEditorController(note, application))
const note = useRef(controller.item)
const changeEditorFunction = useRef<ChangeEditorFunction>()
const ignoreNextChange = useRef(false)
const handleChange = useCallback(
(value: string, preview: string) => {
void controller.current.save({ text: value, previewPlain: preview, previewHtml: undefined })
async (value: string, preview: string) => {
if (ignoreNextChange.current === true) {
ignoreNextChange.current = false
return
}
void controller.saveAndAwaitLocalPropagation({
text: value,
isUserModified: true,
previews: {
previewPlain: preview,
previewHtml: undefined,
},
})
},
[controller],
)
@@ -54,24 +72,49 @@ export const BlockEditor: FunctionComponent<Props> = ({
[linkingController, application],
)
useEffect(() => {
const disposer = controller.addNoteInnerValueChangeObserver((updatedNote, source) => {
if (updatedNote.uuid !== note.current.uuid) {
throw Error('Editor received changes for non-current note')
}
if (isPayloadSourceRetrieved(source)) {
ignoreNextChange.current = true
changeEditorFunction.current?.(updatedNote.text)
}
note.current = updatedNote
})
return disposer
}, [controller, controller.item.uuid])
return (
<div className="relative h-full w-full px-5 py-4">
<ErrorBoundary>
<LinkingControllerProvider controller={linkingController}>
<FilesControllerProvider controller={filesController}>
<BlocksEditorComposer readonly={note.locked} initialValue={note.text} nodes={[FileNode, BubbleNode]}>
<BlocksEditorComposer
readonly={note.current.locked}
initialValue={note.current.text}
nodes={[FileNode, BubbleNode]}
>
<BlocksEditor
onChange={handleChange}
className="relative relative resize-none text-base focus:shadow-none focus:outline-none"
ignoreFirstChange={true}
className="relative relative h-full resize-none text-base focus:shadow-none focus:outline-none"
previewLength={NotePreviewCharLimit}
spellcheck={spellcheck}
>
<ItemSelectionPlugin currentNote={note} />
<ItemSelectionPlugin currentNote={note.current} />
<FilePlugin />
<ItemBubblePlugin />
<BlockPickerMenuPlugin />
<DatetimePlugin />
<AutoLinkPlugin />
<ChangeContentCallbackPlugin
providerCallback={(callback) => (changeEditorFunction.current = callback)}
/>
<NodeObserverPlugin nodeType={BubbleNode} onRemove={handleBubbleRemove} />
<NodeObserverPlugin nodeType={FileNode} onRemove={handleBubbleRemove} />
</BlocksEditor>

38
packages/web/src/javascripts/Components/BlockEditor/SuperNoteImporter.tsx → packages/web/src/javascripts/Components/NoteView/SuperEditor/SuperNoteImporter.tsx
View File

@@ -1,7 +1,6 @@
import { WebApplication } from '@/Application/Application'
import { NoteType, SNNote } from '@standardnotes/snjs'
import { FunctionComponent, useCallback, useState } from 'react'
import { BlockEditorController } from './BlockEditorController'
import { FunctionComponent, useCallback, useEffect, useState } from 'react'
import { BlocksEditor, BlocksEditorComposer } from '@standardnotes/blocks-editor'
import { ErrorBoundary } from '@/Utils/ErrorBoundary'
import ModalDialog from '@/Components/Shared/ModalDialog'
@@ -10,6 +9,7 @@ import ModalDialogDescription from '@/Components/Shared/ModalDialogDescription'
import ModalDialogLabel from '@/Components/Shared/ModalDialogLabel'
import Button from '@/Components/Button/Button'
import ImportPlugin from './Plugins/ImportPlugin/ImportPlugin'
import { NoteViewController } from '../Controller/NoteViewController'
export function spaceSeparatedStrings(...strings: string[]): string {
return strings.join(' ')
@@ -36,12 +36,31 @@ export const SuperNoteImporter: FunctionComponent<Props> = ({ note, application,
setLastValue({ text: value, previewPlain: preview })
}, [])
const confirmConvert = useCallback(() => {
const controller = new BlockEditorController(note, application)
void controller.save({ text: lastValue.text, previewPlain: lastValue.previewPlain, previewHtml: undefined })
const performConvert = useCallback(
async (text: string, previewPlain: string) => {
const controller = new NoteViewController(application, note)
await controller.initialize()
await controller.saveAndAwaitLocalPropagation({
text: text,
previews: { previewPlain: previewPlain, previewHtml: undefined },
isUserModified: true,
bypassDebouncer: true,
})
},
[application, note],
)
const confirmConvert = useCallback(async () => {
await performConvert(lastValue.text, lastValue.previewPlain)
closeDialog()
onConvertComplete()
}, [closeDialog, application, lastValue, note, onConvertComplete])
}, [closeDialog, performConvert, onConvertComplete, lastValue])
useEffect(() => {
if (note.text.length === 0) {
void confirmConvert()
}
}, [note, confirmConvert])
const convertAsIs = useCallback(async () => {
const confirmed = await application.alertService.confirm(
@@ -56,11 +75,11 @@ export const SuperNoteImporter: FunctionComponent<Props> = ({ note, application,
return
}
const controller = new BlockEditorController(note, application)
void controller.save({ text: note.text, previewPlain: note.preview_plain, previewHtml: undefined })
await performConvert(note.text, note.preview_plain)
closeDialog()
onConvertComplete()
}, [closeDialog, application, note, onConvertComplete])
}, [closeDialog, application, note, onConvertComplete, performConvert])
return (
<ModalDialog>
@@ -77,6 +96,7 @@ export const SuperNoteImporter: FunctionComponent<Props> = ({ note, application,
<BlocksEditorComposer readonly initialValue={''}>
<BlocksEditor
onChange={handleChange}
ignoreFirstChange={false}
className="relative relative resize-none text-base focus:shadow-none focus:outline-none"
previewLength={NotePreviewCharLimit}
spellcheck={note.spellcheck}

4
packages/web/src/javascripts/Components/SmartViewBuilder/CompoundPredicateBuilderController.ts
View File

@@ -1,4 +1,4 @@
import { PlainEditorType } from '@/Utils/DropdownItemsForEditors'
import { FeatureIdentifier } from '@standardnotes/features'
import { NoteType, PredicateCompoundOperator, PredicateJsonForm } from '@standardnotes/snjs'
import { makeObservable, observable, action } from 'mobx'
import { PredicateKeypath, PredicateKeypathTypes } from './PredicateKeypaths'
@@ -59,7 +59,7 @@ export class CompoundPredicateBuilderController {
this.setPredicate(index, { value: Object.values(NoteType)[0] })
break
case 'editorIdentifier':
this.setPredicate(index, { value: PlainEditorType })
this.setPredicate(index, { value: FeatureIdentifier.PlainEditor })
break
case 'date':
this.setPredicate(index, { value: '1.days.ago' })

26
packages/web/src/javascripts/Constants/Constants.ts
View File

@@ -1,3 +1,5 @@
import { IconType } from '@standardnotes/snjs'
export const PANEL_NAME_NOTES = 'notes'
export const PANEL_NAME_NAVIGATION = 'navigation'
@@ -21,8 +23,26 @@ export const TAG_FOLDERS_FEATURE_NAME = 'Tag folders'
export const TAG_FOLDERS_FEATURE_TOOLTIP = 'A Plus or Pro plan is required to enable Tag folders.'
export const SMART_TAGS_FEATURE_NAME = 'Smart Tags'
export const PLAIN_EDITOR_NAME = 'Plain Text'
export const BLOCKS_EDITOR_NAME = 'Super'
export const SYNC_TIMEOUT_DEBOUNCE = 350
export const SYNC_TIMEOUT_NO_DEBOUNCE = 100
type EditorMetadata = {
name: string
icon: IconType
iconClassName: string
iconTintNumber: number
}
export const SuperEditorMetadata: EditorMetadata = {
name: 'Super',
icon: 'file-doc',
iconClassName: 'text-accessory-tint-4',
iconTintNumber: 4,
}
export const PlainEditorMetadata: EditorMetadata = {
name: 'Plain Text',
icon: 'plain-text',
iconClassName: 'text-accessory-tint-1',
iconTintNumber: 1,
}

20
packages/web/src/javascripts/Controllers/ItemList/ItemListController.ts
View File

@@ -5,7 +5,6 @@ import {
CollectionSort,
ContentType,
findInArray,
NoteViewController,
PrefKey,
SmartView,
SNNote,
@@ -15,12 +14,10 @@ import {
InternalEventBus,
InternalEventHandlerInterface,
InternalEventInterface,
FileViewController,
FileItem,
WebAppEvent,
NewNoteTitleFormat,
useBoolean,
TemplateNoteViewAutofocusBehavior,
isTag,
isFile,
} from '@standardnotes/snjs'
@@ -38,6 +35,9 @@ import dayjs from 'dayjs'
import { LinkingController } from '../LinkingController'
import { AbstractViewController } from '../Abstract/AbstractViewController'
import { log, LoggingDomain } from '@/Logging'
import { NoteViewController } from '@/Components/NoteView/Controller/NoteViewController'
import { FileViewController } from '@/Components/NoteView/Controller/FileViewController'
import { TemplateNoteViewAutofocusBehavior } from '@/Components/NoteView/Controller/TemplateNoteViewControllerOptions'
const MinNoteCellHeight = 51.0
const DefaultListNumNotes = 20
@@ -255,7 +255,7 @@ export class ItemListController extends AbstractViewController implements Intern
return
}
await this.application.itemControllerGroup.createItemController(note)
await this.application.itemControllerGroup.createItemController({ note })
this.linkingController.reloadAllLinks()
@@ -273,7 +273,7 @@ export class ItemListController extends AbstractViewController implements Intern
return
}
await this.application.itemControllerGroup.createItemController(file)
await this.application.itemControllerGroup.createItemController({ file })
this.linkingController.reloadAllLinks()
}
@@ -624,10 +624,12 @@ export class ItemListController extends AbstractViewController implements Intern
const activeRegularTagUuid = selectedTag instanceof SNTag ? selectedTag.uuid : undefined
return this.application.itemControllerGroup.createItemController({
title,
tag: activeRegularTagUuid,
createdAt,
autofocusBehavior,
templateOptions: {
title,
tag: activeRegularTagUuid,
createdAt,
autofocusBehavior,
},
})
}

2
packages/web/src/javascripts/Controllers/LinkingController.tsx
View File

@@ -1,5 +1,6 @@
import { WebApplication } from '@/Application/Application'
import { PopoverFileItemActionType } from '@/Components/AttachedFilesPopover/PopoverFileItemAction'
import { NoteViewController } from '@/Components/NoteView/Controller/NoteViewController'
import { AppPaneId } from '@/Components/ResponsivePane/AppPaneMetadata'
import { PrefDefaults } from '@/Constants/PrefDefaults'
import { createLinkFromItem } from '@/Utils/Items/Search/createLinkFromItem'
@@ -11,7 +12,6 @@ import {
FileItem,
InternalEventBus,
naturalSort,
NoteViewController,
PrefKey,
SNNote,
SNTag,

4
packages/web/src/javascripts/FeatureTrunk.ts
View File

@@ -1,11 +1,11 @@
import { isDev } from '@/Utils'
export enum FeatureTrunkName {
Blocks,
Super,
}
export const FeatureTrunkStatus: Record<FeatureTrunkName, boolean> = {
[FeatureTrunkName.Blocks]: isDev && true,
[FeatureTrunkName.Super]: isDev && true,
}
export function featureTrunkEnabled(trunk: FeatureTrunkName): boolean {

2
packages/web/src/javascripts/Logging.ts
View File

@@ -20,7 +20,7 @@ const LoggingStatus: Record<LoggingDomain, boolean> = {
[LoggingDomain.Viewport]: false,
[LoggingDomain.Selection]: false,
[LoggingDomain.BlockEditor]: false,
[LoggingDomain.Purchasing]: true,
[LoggingDomain.Purchasing]: false,
}
// eslint-disable-next-line @typescript-eslint/no-explicit-any

47
packages/web/src/javascripts/Utils/DropdownItemsForEditors.ts
View File

@@ -1,23 +1,34 @@
import { ComponentArea, FeatureIdentifier } from '@standardnotes/features'
import { DropdownItem } from '@/Components/Dropdown/DropdownItem'
import { FeatureIdentifier } from '@standardnotes/snjs'
import { ComponentArea, NoteType } from '@standardnotes/features'
import { WebApplication } from '@/Application/Application'
import { BLOCKS_EDITOR_NAME, PLAIN_EDITOR_NAME } from '@/Constants/Constants'
import { featureTrunkEnabled, FeatureTrunkName } from '@/FeatureTrunk'
import { PlainEditorMetadata, SuperEditorMetadata } from '@/Constants/Constants'
import { getIconAndTintForNoteType } from './Items/Icons/getIconAndTintForNoteType'
export const PlainEditorType = 'plain-editor'
export const BlocksType = 'blocks-editor'
import { DropdownItem } from '@/Components/Dropdown/DropdownItem'
export type EditorOption = DropdownItem & {
value: FeatureIdentifier | typeof PlainEditorType | typeof BlocksType
value: FeatureIdentifier
}
export function getDropdownItemsForAllEditors(application: WebApplication) {
export function noteTypeForEditorOptionValue(value: EditorOption['value'], application: WebApplication): NoteType {
if (value === FeatureIdentifier.PlainEditor) {
return NoteType.Plain
} else if (value === FeatureIdentifier.SuperEditor) {
return NoteType.Super
}
const matchingEditor = application.componentManager
.componentsForArea(ComponentArea.Editor)
.find((editor) => editor.identifier === value)
return matchingEditor ? matchingEditor.noteType : NoteType.Unknown
}
export function getDropdownItemsForAllEditors(application: WebApplication): EditorOption[] {
const plaintextOption: EditorOption = {
icon: 'plain-text',
iconClassName: 'text-accessory-tint-1',
label: PLAIN_EDITOR_NAME,
value: PlainEditorType,
icon: PlainEditorMetadata.icon,
iconClassName: PlainEditorMetadata.iconClassName,
label: PlainEditorMetadata.name,
value: FeatureIdentifier.PlainEditor,
}
const options = application.componentManager.componentsForArea(ComponentArea.Editor).map((editor): EditorOption => {
@@ -34,12 +45,12 @@ export function getDropdownItemsForAllEditors(application: WebApplication) {
options.push(plaintextOption)
if (featureTrunkEnabled(FeatureTrunkName.Blocks)) {
if (application.features.isExperimentalFeatureEnabled(FeatureIdentifier.SuperEditor)) {
options.push({
icon: 'dashboard',
iconClassName: 'text-accessory-tint-1',
label: BLOCKS_EDITOR_NAME,
value: BlocksType,
icon: SuperEditorMetadata.icon,
iconClassName: SuperEditorMetadata.iconClassName,
label: SuperEditorMetadata.name,
value: FeatureIdentifier.SuperEditor,
})
}

5
packages/web/src/javascripts/Utils/Items/Icons/getIconAndTintForNoteType.ts
View File

@@ -1,3 +1,4 @@
import { PlainEditorMetadata, SuperEditorMetadata } from '@/Constants/Constants'
import { NoteType } from '@standardnotes/features'
import { IconType } from '@standardnotes/models'
@@ -15,7 +16,9 @@ export function getIconAndTintForNoteType(noteType?: NoteType): [IconType, numbe
return ['tasks', 3]
case NoteType.Code:
return ['code', 4]
case NoteType.Super:
return [SuperEditorMetadata.icon, SuperEditorMetadata.iconTintNumber]
default:
return ['plain-text', 1]
return [PlainEditorMetadata.icon, PlainEditorMetadata.iconTintNumber]
}
}

34
packages/web/src/javascripts/Utils/createEditorMenuGroups.ts
View File

@@ -1,4 +1,3 @@
import { featureTrunkEnabled, FeatureTrunkName } from '@/FeatureTrunk'
import { WebApplication } from '@/Application/Application'
import {
ContentType,
@@ -8,10 +7,11 @@ import {
FeatureDescription,
GetFeatures,
NoteType,
FeatureIdentifier,
} from '@standardnotes/snjs'
import { EditorMenuGroup } from '@/Components/NotesOptions/EditorMenuGroup'
import { EditorMenuItem } from '@/Components/NotesOptions/EditorMenuItem'
import { BLOCKS_EDITOR_NAME, PLAIN_EDITOR_NAME } from '@/Constants/Constants'
import { PlainEditorMetadata, SuperEditorMetadata } from '@/Constants/Constants'
type NoteTypeToEditorRowsMap = Record<NoteType, EditorMenuItem[]>
@@ -72,7 +72,7 @@ const insertInstalledComponentsInMap = (
})
}
const createGroupsFromMap = (map: NoteTypeToEditorRowsMap): EditorMenuGroup[] => {
const createGroupsFromMap = (map: NoteTypeToEditorRowsMap, application: WebApplication): EditorMenuGroup[] => {
const groups: EditorMenuGroup[] = [
{
icon: 'plain-text',
@@ -124,12 +124,12 @@ const createGroupsFromMap = (map: NoteTypeToEditorRowsMap): EditorMenuGroup[] =>
},
]
if (featureTrunkEnabled(FeatureTrunkName.Blocks)) {
if (application.features.isExperimentalFeatureEnabled(FeatureIdentifier.SuperEditor)) {
groups.splice(1, 0, {
icon: 'file-doc',
iconClassName: 'text-accessory-tint-4',
title: BLOCKS_EDITOR_NAME,
items: map[NoteType.Blocks],
icon: SuperEditorMetadata.icon,
iconClassName: SuperEditorMetadata.iconClassName,
title: SuperEditorMetadata.name,
items: map[NoteType.Super],
featured: true,
})
}
@@ -137,16 +137,16 @@ const createGroupsFromMap = (map: NoteTypeToEditorRowsMap): EditorMenuGroup[] =>
return groups
}
const createBaselineMap = (): NoteTypeToEditorRowsMap => {
const createBaselineMap = (application: WebApplication): NoteTypeToEditorRowsMap => {
const map: NoteTypeToEditorRowsMap = {
[NoteType.Plain]: [
{
name: PLAIN_EDITOR_NAME,
name: PlainEditorMetadata.name,
isEntitled: true,
noteType: NoteType.Plain,
},
],
[NoteType.Blocks]: [],
[NoteType.Super]: [],
[NoteType.RichText]: [],
[NoteType.Markdown]: [],
[NoteType.Task]: [],
@@ -156,11 +156,11 @@ const createBaselineMap = (): NoteTypeToEditorRowsMap => {
[NoteType.Unknown]: [],
}
if (featureTrunkEnabled(FeatureTrunkName.Blocks)) {
map[NoteType.Blocks].push({
name: BLOCKS_EDITOR_NAME,
if (application.features.isExperimentalFeatureEnabled(FeatureIdentifier.SuperEditor)) {
map[NoteType.Super].push({
name: SuperEditorMetadata.name,
isEntitled: true,
noteType: NoteType.Blocks,
noteType: NoteType.Super,
})
}
@@ -168,11 +168,11 @@ const createBaselineMap = (): NoteTypeToEditorRowsMap => {
}
export const createEditorMenuGroups = (application: WebApplication, components: SNComponent[]) => {
const map = createBaselineMap()
const map = createBaselineMap(application)
insertNonInstalledNativeComponentsInMap(map, components, application)
insertInstalledComponentsInMap(map, components, application)
return createGroupsFromMap(map)
return createGroupsFromMap(map, application)
}

5
packages/web/src/javascripts/__mocks__/@standardnotes/sncrypto-web.js Normal file
View File

@@ -0,0 +1,5 @@
class SNWebCrypto {
initialize() {}
}
module.exports = { SNWebCrypto }