Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

EZQ-49: Update collaborator #2677

Merged
merged 1 commit into from
Feb 22, 2023
Merged

EZQ-49: Update collaborator #2677

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
265 changes: 135 additions & 130 deletions packages/text-editor/src/components/CollaboratorEditor.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,7 @@

export let documentId: string
export let readonly = false
export let visible = true

export let token: string
export let collaboratorURL: string
Expand Down Expand Up @@ -129,8 +130,10 @@
editor.commands.toggleStrike()
}

export function getHTML (): string {
return editor.getHTML()
export function getHTML (): string | undefined {
if (editor) {
return editor.getHTML()
}
}

export function getLink () {
Expand Down Expand Up @@ -466,144 +469,146 @@
let showDiff = true
</script>

<div class="ref-container" class:autoOverflow>
{#if isFormatting && !readonly}
<div class="formatPanelRef formatPanel flex-between clear-mins" class:focused>
<div class="flex-row-center buttons-group xsmall-gap">
<StyleButton
icon={Header}
size={buttonSize}
selected={activeModes.has('heading')}
showTooltip={{ label: getEmbeddedLabel(`H${headingLevel}`) }}
on:click={toggleHeader}
/>

<StyleButton
icon={Bold}
size={buttonSize}
selected={activeModes.has('bold')}
showTooltip={{ label: textEditorPlugin.string.Bold }}
on:click={getToggler(toggleBold)}
/>
<StyleButton
icon={Italic}
size={buttonSize}
selected={activeModes.has('italic')}
showTooltip={{ label: textEditorPlugin.string.Italic }}
on:click={getToggler(toggleItalic)}
/>
<StyleButton
icon={Strikethrough}
size={buttonSize}
selected={activeModes.has('strike')}
showTooltip={{ label: textEditorPlugin.string.Strikethrough }}
on:click={getToggler(toggleStrike)}
/>
<StyleButton
icon={LinkEl}
size={buttonSize}
selected={activeModes.has('link')}
disabled={isSelectionEmpty && !activeModes.has('link')}
showTooltip={{ label: textEditorPlugin.string.Link }}
on:click={formatLink}
/>
<div class="buttons-divider" />
<StyleButton
icon={ListNumber}
size={buttonSize}
selected={activeModes.has('orderedList')}
showTooltip={{ label: textEditorPlugin.string.OrderedList }}
on:click={getToggler(toggleOrderedList)}
/>
<StyleButton
icon={ListBullet}
size={buttonSize}
selected={activeModes.has('bulletList')}
showTooltip={{ label: textEditorPlugin.string.BulletedList }}
on:click={getToggler(toggleBulletList)}
/>
<div class="buttons-divider" />
<StyleButton
icon={Quote}
size={buttonSize}
selected={activeModes.has('blockquote')}
showTooltip={{ label: textEditorPlugin.string.Blockquote }}
on:click={getToggler(toggleBlockquote)}
/>
<div class="buttons-divider" />
<StyleButton
icon={Code}
size={buttonSize}
selected={activeModes.has('code')}
showTooltip={{ label: textEditorPlugin.string.Code }}
on:click={getToggler(toggleCode)}
/>
<StyleButton
icon={CodeBlock}
size={buttonSize}
selected={activeModes.has('codeBlock')}
showTooltip={{ label: textEditorPlugin.string.CodeBlock }}
on:click={getToggler(toggleCodeBlock)}
/>
{#if visible}
<div class="ref-container" class:autoOverflow>
{#if isFormatting && !readonly}
<div class="formatPanelRef formatPanel flex-between clear-mins" class:focused>
<div class="flex-row-center buttons-group xsmall-gap">
<StyleButton
icon={Header}
size={buttonSize}
selected={activeModes.has('heading')}
showTooltip={{ label: getEmbeddedLabel(`H${headingLevel}`) }}
on:click={toggleHeader}
/>

<StyleButton
icon={IconTable}
iconProps={{ style: 'table' }}
size={buttonSize}
selected={activeModes.has('table')}
on:click={insertTable}
showTooltip={{ label: textEditorPlugin.string.InsertTable }}
/>
{#if activeModes.has('table')}
<StyleButton
icon={IconTable}
iconProps={{ style: 'tableProps' }}
icon={Bold}
size={buttonSize}
on:click={tableOptions}
showTooltip={{ label: textEditorPlugin.string.TableOptions }}
selected={activeModes.has('bold')}
showTooltip={{ label: textEditorPlugin.string.Bold }}
on:click={getToggler(toggleBold)}
/>
{/if}
</div>
<div class="flex-grow" />
{#if comparedVersion !== undefined}
<div class="flex-row-center buttons-group xsmall-gap">
<StyleButton
icon={Objects}
icon={Italic}
size={buttonSize}
selected={showDiff}
showTooltip={{ label: textEditorPlugin.string.EnableDiffMode }}
on:click={() => {
showDiff = !showDiff
editor.chain().focus()
}}
selected={activeModes.has('italic')}
showTooltip={{ label: textEditorPlugin.string.Italic }}
on:click={getToggler(toggleItalic)}
/>
<slot name="tools" />
</div>
{:else}
<div class="formatPanelRef formatPanel buttons-group xsmall-gap">
<slot name="tools" />
<StyleButton
icon={Strikethrough}
size={buttonSize}
selected={activeModes.has('strike')}
showTooltip={{ label: textEditorPlugin.string.Strikethrough }}
on:click={getToggler(toggleStrike)}
/>
<StyleButton
icon={LinkEl}
size={buttonSize}
selected={activeModes.has('link')}
disabled={isSelectionEmpty && !activeModes.has('link')}
showTooltip={{ label: textEditorPlugin.string.Link }}
on:click={formatLink}
/>
<div class="buttons-divider" />
<StyleButton
icon={ListNumber}
size={buttonSize}
selected={activeModes.has('orderedList')}
showTooltip={{ label: textEditorPlugin.string.OrderedList }}
on:click={getToggler(toggleOrderedList)}
/>
<StyleButton
icon={ListBullet}
size={buttonSize}
selected={activeModes.has('bulletList')}
showTooltip={{ label: textEditorPlugin.string.BulletedList }}
on:click={getToggler(toggleBulletList)}
/>
<div class="buttons-divider" />
<StyleButton
icon={Quote}
size={buttonSize}
selected={activeModes.has('blockquote')}
showTooltip={{ label: textEditorPlugin.string.Blockquote }}
on:click={getToggler(toggleBlockquote)}
/>
<div class="buttons-divider" />
<StyleButton
icon={Code}
size={buttonSize}
selected={activeModes.has('code')}
showTooltip={{ label: textEditorPlugin.string.Code }}
on:click={getToggler(toggleCode)}
/>
<StyleButton
icon={CodeBlock}
size={buttonSize}
selected={activeModes.has('codeBlock')}
showTooltip={{ label: textEditorPlugin.string.CodeBlock }}
on:click={getToggler(toggleCodeBlock)}
/>

<StyleButton
icon={IconTable}
iconProps={{ style: 'table' }}
size={buttonSize}
selected={activeModes.has('table')}
on:click={insertTable}
showTooltip={{ label: textEditorPlugin.string.InsertTable }}
/>
{#if activeModes.has('table')}
<StyleButton
icon={IconTable}
iconProps={{ style: 'tableProps' }}
size={buttonSize}
on:click={tableOptions}
showTooltip={{ label: textEditorPlugin.string.TableOptions }}
/>
{/if}
</div>
{/if}
</div>
{:else if comparedVersion !== undefined}
<div class="formatPanelRef formatPanel flex flex-grow flex-reverse">
<StyleButton
icon={Objects}
size={buttonSize}
selected={showDiff}
showTooltip={{ label: textEditorPlugin.string.EnableDiffMode }}
on:click={() => {
showDiff = !showDiff
editor.chain().focus()
}}
/>
<slot name="tools" />
<div class="flex-grow" />
{#if comparedVersion !== undefined}
<div class="flex-row-center buttons-group xsmall-gap">
<StyleButton
icon={Objects}
size={buttonSize}
selected={showDiff}
showTooltip={{ label: textEditorPlugin.string.EnableDiffMode }}
on:click={() => {
showDiff = !showDiff
editor.chain().focus()
}}
/>
<slot name="tools" />
</div>
{:else}
<div class="formatPanelRef formatPanel buttons-group xsmall-gap">
<slot name="tools" />
</div>
{/if}
</div>
{:else if comparedVersion !== undefined}
<div class="formatPanelRef formatPanel flex flex-grow flex-reverse">
<StyleButton
icon={Objects}
size={buttonSize}
selected={showDiff}
showTooltip={{ label: textEditorPlugin.string.EnableDiffMode }}
on:click={() => {
showDiff = !showDiff
editor.chain().focus()
}}
/>
<slot name="tools" />
</div>
{/if}
<div class="textInput" class:focusable>
<div class="select-text" style="width: 100%;" bind:this={element} />
</div>
{/if}
<div class="textInput" class:focusable>
<div class="select-text" style="width: 100%;" bind:this={element} />
</div>
</div>
{/if}

<style lang="scss" global>
.ProseMirror {
Expand Down
2 changes: 1 addition & 1 deletion plugins/document-resources/src/components/DocumentEditor.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@
const token = getMetadata(login.metadata.LoginToken) ?? ''
const collaboratorURL = getMetadata(document.metadata.CollaboratorUrl) ?? ''
let editor: CollaboratorEditor
export function getHTML (): string {
export function getHTML (): string | undefined {
return editor.getHTML()
}
</script>
Expand Down