Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@
makeDocCollabId,
type Ref
} from '@hcengineering/core'
import { IntlString, translate } from '@hcengineering/platform'
import { IntlString } from '@hcengineering/platform'
import {
DrawingCmd,
getAttribute,
Expand Down Expand Up @@ -88,7 +88,9 @@
export let buttonSize: IconSize = 'small'
export let actionsButtonSize: IconSize = 'medium'
export let full: boolean = false

export let placeholder: IntlString = textEditor.string.EditorPlaceholder
export let placeholderParams: Record<string, any> = {}

export let refActions: RefAction[] = []

Expand Down Expand Up @@ -143,21 +145,6 @@
let element: HTMLElement
let editorPopupContainer: HTMLElement

let placeHolderStr: string = ''

$: ph = translate(placeholder, {}, $themeStore.language).then((r) => {
if (editor !== undefined && placeHolderStr !== r) {
const placeholderIndex = editor.extensionManager.extensions.findIndex(
(extension) => extension.name === 'placeholder'
)
if (placeholderIndex !== -1) {
editor.extensionManager.extensions[placeholderIndex].options.placeholder = r
editor.view.dispatch(editor.state.tr)
}
}
placeHolderStr = r
})

$: dispatch('editor', editor)

const editorHandler: TextEditorHandler = {
Expand Down Expand Up @@ -365,8 +352,6 @@
}

onMount(async () => {
await ph

// it is recommended to wait for the local provider to be loaded
// https://discuss.yjs.dev/t/initial-offline-value-of-a-shared-document/465/4
await localProvider.loaded
Expand Down Expand Up @@ -416,7 +401,11 @@
},
inlineCommands:
withInlineCommands && inlineCommandsConfig(handleLeftMenuClick, canAttachFiles ? [] : ['image']),
placeholder: { placeholder: placeHolderStr },
placeholder: {
placeholderIntl: placeholder,
placeholderIntlParams: placeholderParams,
themeStore
},
collaboration: {
collaboration: { document: ydoc, field },
collaborationCursor: {
Expand Down Expand Up @@ -515,11 +504,6 @@

<div class="textInput">
<div class="select-text" class:hidden={loading} style="width: 100%;" bind:this={element} />
<!-- <div class="collaborationUsers-container flex-col flex-gap-2 pt-2">
{#if remoteProvider && editor && userComponent}
<CollaborationUsers provider={remoteProvider} {editor} component={userComponent} />
{/if}
</div> -->
</div>

{#if refActions.length > 0}
Expand Down
25 changes: 6 additions & 19 deletions plugins/text-editor-resources/src/components/TextEditor.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
<script lang="ts">
import { Analytics } from '@hcengineering/analytics'
import { type Blob, Markup, type Ref } from '@hcengineering/core'
import { IntlString, translate } from '@hcengineering/platform'
import { IntlString } from '@hcengineering/platform'
import { EmptyMarkup, getMarkup, markupToJSON } from '@hcengineering/text'
import textEditor from '@hcengineering/text-editor'
import { themeStore } from '@hcengineering/ui'
Expand All @@ -43,21 +43,6 @@
let element: HTMLElement
let editor: Editor

let placeHolderStr: string = ''

$: ph = translate(placeholder, placeholderParams, $themeStore.language).then((r) => {
if (editor !== undefined && placeHolderStr !== r) {
const placeholderIndex = editor.extensionManager.extensions.findIndex(
(extension) => extension.name === 'placeholder'
)
if (placeholderIndex !== -1) {
editor.extensionManager.extensions[placeholderIndex].options.placeholder = r
editor.view.dispatch(editor.state.tr)
}
}
placeHolderStr = r
})

const dispatch = createEventDispatcher()

export function isEditable (): boolean {
Expand Down Expand Up @@ -152,8 +137,6 @@
}

onMount(async () => {
await ph

const kit = await getEditorKit(
{
mode: 'compact',
Expand All @@ -162,7 +145,11 @@
textAlign: false,
reference: false,
emoji: false,
placeholder: { placeholder: placeHolderStr },
placeholder: {
placeholderIntl: placeholder,
placeholderIntlParams: placeholderParams,
themeStore
},
submit: supportSubmit ? { submit } : false
},
kitOptions
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,92 @@
//
// Copyright © 2025 Hardcore Engineering Inc.
//
// Licensed under the Eclipse Public License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License. You may
// obtain a copy of the License at https://www.eclipse.org/legal/epl-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
//
// See the License for the specific language governing permissions and
// limitations under the License.
//

import { type IntlString, translate } from '@hcengineering/platform'
import { type ThemeOptions } from '@hcengineering/theme'
import { type PlaceholderOptions, Placeholder } from '@tiptap/extension-placeholder'
import { type Readable, get } from 'svelte/store'

export interface I18nPlaceholderOptions extends PlaceholderOptions {
placeholderIntl: IntlString
placeholderIntlParams?: Record<string, any>
themeStore: Readable<ThemeOptions>
}

export interface I18nPlaceholderStorage {
placeholder: string
unsubscribe?: () => void
}

export const I18nPlaceholderExtension = Placeholder.extend<I18nPlaceholderOptions, I18nPlaceholderStorage>({
name: 'i18n-placeholder',

addOptions () {
return {
...this.parent?.(),
placeholderIntl: '' as IntlString,
placeholderIntlParams: {},
themeStore: undefined as any
}
},

addStorage () {
return {
placeholder: '',
unsubscribe: undefined
}
},

onCreate () {
const options = this.options
const storage = this.storage

const placeholderIntl = options.placeholderIntl
const placeholderIntlParams = options.placeholderIntlParams

// Set the placeholder function before any rendering happens
this.options.placeholder = (): string => storage.placeholder

// Get initial translation
const theme = get(options.themeStore)
if (placeholderIntl !== undefined) {
void translate(placeholderIntl, placeholderIntlParams, theme?.language ?? 'en').then((translated) => {
storage.placeholder = translated
// Force initial update
if (this.editor !== undefined && this.editor !== null) {
this.editor.view.dispatch(this.editor.state.tr)
}
})
}

// Subscribe to theme store changes
if (options.themeStore !== undefined && options.themeStore !== null) {
storage.unsubscribe = options.themeStore.subscribe((theme) => {
if (placeholderIntl !== undefined) {
void translate(placeholderIntl, placeholderIntlParams, theme.language).then((translated) => {
storage.placeholder = translated
// Force editor update to show new translation
if (this.editor !== undefined && this.editor !== null) {
this.editor.view.dispatch(this.editor.state.tr)
}
})
}
})
}
},

onDestroy () {
this.storage.unsubscribe?.()
}
})
4 changes: 2 additions & 2 deletions plugins/text-editor-resources/src/kits/editor-kit.ts
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,6 @@ import 'prosemirror-codemark/dist/codemark.css'

import Collaboration from '@tiptap/extension-collaboration'
import CollaborationCursor from '@tiptap/extension-collaboration-cursor'
import Placeholder from '@tiptap/extension-placeholder'
import { CodeBlockHighlighExtension, codeBlockHighlightOptions } from '../components/extension/codeSnippets/codeblock'
import { MermaidExtension, mermaidOptions } from '../components/extension/codeSnippets/mermaid'
import { DrawingBoardExtension } from '../components/extension/drawingBoard'
Expand Down Expand Up @@ -65,6 +64,7 @@ import { ToCExtension } from '../components/extension/toc'
import { TodoItemExtension, TodoListExtension } from '../components/extension/todo/todo'
import { ToolbarExtension } from '../components/extension/toolbar/toolbar'
import { ListKeymapExtension } from '../components/extension/shortcuts/listKeymap'
import { I18nPlaceholderExtension } from '../components/extension/i18nPlaceholder'

export interface EditorKitContext {
mode?: 'full' | 'compact'
Expand Down Expand Up @@ -120,7 +120,7 @@ const StaticEditorKit = extensionKit(
toc: e(ToCExtension, false),
leftMenu: e(LeftMenuExtension, false),
inlineCommands: e(InlineCommandsExtension, false),
placeholder: e(Placeholder, false),
placeholder: e(I18nPlaceholderExtension, false),

collaboration: e(subKits.collaboration, false),
hooks: e(subKits.hooks), // Semi-deprecated, should be removed in the future
Expand Down
Loading