hcengineering/platform
1
0
Fork 0
mirror of https://github.com/hcengineering/platform.git synced 2024-11-22 21:50:34 +03:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

EZQMS-266: Commenting on document (#3759)

Browse Source 
Signed-off-by: Anna No <anna.no@xored.com>
This commit is contained in:
Anna No 2023-09-29 14:41:52 +07:00 committed by GitHub
parent ca6f8426b2
commit 5f0ba95cee
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 141 additions and 158 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

87
packages/text-editor/src/components/CollaboratorEditor.svelte
View File

@ -24,17 +24,15 @@
import Collaboration from '@tiptap/extension-collaboration'
import CollaborationCursor from '@tiptap/extension-collaboration-cursor'
import Placeholder from '@tiptap/extension-placeholder'
import BubbleMenu from '@tiptap/extension-bubble-menu'
import { generateId, getCurrentAccount, Markup } from '@hcengineering/core'
import { getCurrentAccount, Markup } from '@hcengineering/core'
import { IntlString, translate } from '@hcengineering/platform'
import { Component, getPlatformColorForText, IconObjects, IconSize, themeStore } from '@hcengineering/ui'
import { getPlatformColorForText, IconObjects, IconSize, themeStore } from '@hcengineering/ui'
import textEditorPlugin from '../plugin'
import { CollaborationIds, TextFormatCategory, TextNodeAction } from '../types'
import { calculateDecorations } from './diff/decorations'
import { defaultExtensions } from './extensions'
import { NodeHighlightExtension, NodeHighlightType } from './extension/nodeHighlight'
import TextEditorStyleToolbar from './TextEditorStyleToolbar.svelte'
import StyleButton from './StyleButton.svelte'
@ -60,9 +58,9 @@
export let autoOverflow = false
export let initialContent: string | undefined = undefined
export let textNodeActions: TextNodeAction[] = []
export let extensions: AnyExtension[] = []
export let isNodeHighlightModeOn: boolean = false
export let onNodeHighlightType: (uuid: string) => NodeHighlightType = () => NodeHighlightType.WARNING
export let onExtensions: () => AnyExtension[] = () => []
let element: HTMLElement
const ydoc = (getContext(CollaborationIds.Doc) as Y.Doc | undefined) ?? new Y.Doc()
const contextProvider = getContext(CollaborationIds.Provider) as WebsocketProvider | undefined
@ -84,10 +82,6 @@
const currentUser = getCurrentAccount()
let currentTextNodeAction: TextNodeAction | undefined | null
let selectedNodeUuid: string | null | undefined
let textNodeActionMenuElement: HTMLElement
let element: HTMLElement
let editor: Editor
let placeHolderStr: string = ''
@ -177,18 +171,6 @@
}
}
const getNodeUuid = () => {
if (editor.view.state.selection.empty) {
return null
}
if (!selectedNodeUuid) {
selectedNodeUuid = generateId()
editor.chain().setUuid(selectedNodeUuid!).run()
}
return selectedNodeUuid
}
const DecorationExtension = Extension.create({
addProseMirrorPlugins () {
return [
@ -231,34 +213,7 @@
}
}),
DecorationExtension,
NodeHighlightExtension.configure({
isHighlightModeOn: () => isNodeHighlightModeOn,
getNodeHighlightType: onNodeHighlightType,
onNodeSelected: (uuid: string | null) => {
if (selectedNodeUuid !== uuid) {
selectedNodeUuid = uuid
dispatch('node-selected', selectedNodeUuid)
}
}
}),
BubbleMenu.configure({
pluginKey: 'text-node-action-menu',
element: textNodeActionMenuElement,
tippyOptions: {
maxWidth: '38rem',
onClickOutside: () => {
currentTextNodeAction = undefined
}
},
shouldShow: (editor) => {
if (!editor) {
return false
}
return !!currentTextNodeAction
}
}),
...extensions
...onExtensions()
],
onTransaction: () => {
// force re-render so `editor.isActive` works as expected
@ -296,24 +251,7 @@
let showDiff = true
</script>
<div class="actionPanel" bind:this={textNodeActionMenuElement}>
{#if !!currentTextNodeAction}
<Component
is={currentTextNodeAction.panel}
props={{
documentId,
field,
editor,
action: currentTextNodeAction,
disabled: editor.view.state.selection.empty,
onNodeUuid: getNodeUuid
}}
on:close={() => {
currentTextNodeAction = undefined
}}
/>
{/if}
</div>
<slot />
{#if visible}
<div class="ref-container" class:autoOverflow>
{#if isFormatting && !readonly}
@ -336,7 +274,7 @@
needFocus = true
}}
on:action={(event) => {
currentTextNodeAction = textNodeActions.find((action) => action.id === event.detail)
dispatch('action', { action: event.detail, editor })
needFocus = true
}}
/>
@ -517,13 +455,4 @@
position: sticky;
top: 1.25rem;
}
.actionPanel {
margin: -0.5rem -0.25rem 0.5rem;
padding: 0.375rem;
background-color: var(--theme-comp-header-color);
border-radius: 0.5rem;
box-shadow: var(--theme-popup-shadow);
z-index: 1;
}
</style>

135
packages/text-editor/src/components/extension/nodeHighlight.ts
View File

@ -1,5 +1,5 @@
import { Extension, getMarkRange, mergeAttributes } from '@tiptap/core'
import { Plugin, TextSelection } from 'prosemirror-state'
import { Extension, Range, getMarkRange, mergeAttributes } from '@tiptap/core'
import { Plugin, PluginKey, TextSelection } from 'prosemirror-state'
import { NodeUuidExtension, NodeUuidOptions } from './nodeUuid'
export enum NodeHighlightType {
@ -7,82 +7,91 @@ export enum NodeHighlightType {
SUCCESS = 'success',
ERROR = 'error'
}
interface NodeHighlightExtensionOptions extends NodeUuidOptions {
export interface NodeHighlightExtensionOptions extends NodeUuidOptions {
getNodeHighlightType: (uuid: string) => NodeHighlightType | undefined | null
isHighlightModeOn: () => boolean
}
// eslint-disable-next-line @typescript-eslint/no-invalid-void-type
function isRange (range: Range | undefined | null | void): range is Range {
return range !== null && range !== undefined
}
/**
* Extension allows to highlight nodes based on uuid
*/
export const NodeHighlightExtension = Extension.create<NodeHighlightExtensionOptions>({
addProseMirrorPlugins () {
const options = this.options
const plugins = [
new Plugin({
props: {
handleClick (view, pos) {
if (!options.isHighlightModeOn()) {
return
export const NodeHighlightExtension: Extension<NodeHighlightExtensionOptions> =
Extension.create<NodeHighlightExtensionOptions>({
addProseMirrorPlugins () {
const options = this.options
const plugins = [
...(this.parent?.() ?? []),
new Plugin({
key: new PluginKey('handle-node-highlight-click-plugin'),
props: {
handleClick (view, pos) {
if (!options.isHighlightModeOn()) {
return
}
const { schema, doc, tr } = view.state
const range = getMarkRange(doc.resolve(pos), schema.marks[NodeUuidExtension.name])
if (!isRange(range)) {
return false
}
const { from, to } = range
const [$start, $end] = [doc.resolve(from), doc.resolve(to)]
view.dispatch(tr.setSelection(new TextSelection($start, $end)))
return true
}
const { schema, doc, tr } = view.state
}
})
]
const range = getMarkRange(doc.resolve(pos), schema.marks[NodeUuidExtension.name])
return plugins
},
if (range === null || range === undefined) {
return false
addExtensions () {
const options = this.options
return [
NodeUuidExtension.extend({
addOptions () {
return {
...this.parent?.(),
...options
}
},
addAttributes () {
return {
[NodeUuidExtension.name]: {
renderHTML: (attrs) => {
// get uuid from parent mark (NodeUuidExtension) attributes
const uuid = attrs[NodeUuidExtension.name]
const classAttrs: { class?: string } = {}
const [$start, $end] = [doc.resolve(range.from), doc.resolve(range.to)]
if (options.isHighlightModeOn()) {
const type = options.getNodeHighlightType(uuid)
view.dispatch(tr.setSelection(new TextSelection($start, $end)))
return true
}
}
})
]
return plugins
},
addExtensions () {
const options = this.options
return [
NodeUuidExtension.extend({
addOptions () {
return {
...this.parent?.(),
...options
}
},
addAttributes () {
return {
[NodeUuidExtension.name]: {
renderHTML: (attrs) => {
// get uuid from parent mark (NodeUuidExtension) attributes
const uuid = attrs[NodeUuidExtension.name]
const classAttrs: { class?: string } = {}
if (options.isHighlightModeOn()) {
const type = options.getNodeHighlightType(uuid)
if (type === NodeHighlightType.ERROR) {
classAttrs.class = 'text-editor-highlighted-node-error'
} else if (type === NodeHighlightType.WARNING) {
classAttrs.class = 'text-editor-highlighted-node-warning'
} else if (type === NodeHighlightType.SUCCESS) {
classAttrs.class = 'text-editor-highlighted-node-success'
if (type === NodeHighlightType.ERROR) {
classAttrs.class = 'text-editor-highlighted-node-error'
} else if (type === NodeHighlightType.WARNING) {
classAttrs.class = 'text-editor-highlighted-node-warning'
} else if (type === NodeHighlightType.SUCCESS) {
classAttrs.class = 'text-editor-highlighted-node-success'
}
}
}
return mergeAttributes(attrs, classAttrs)
return mergeAttributes(attrs, classAttrs)
}
}
}
}
}
})
]
}
})
})
]
}
})

56
packages/text-editor/src/components/extension/nodeUuid.ts
View File

@ -1,25 +1,29 @@
import { Mark, mergeAttributes } from '@tiptap/core'
import { Mark, getMarkAttributes, mergeAttributes } from '@tiptap/core'
import { Plugin, PluginKey } from 'prosemirror-state'
const NAME = 'node-uuid'
export interface NodeUuidOptions {
HTMLAttributes: Record<string, any>
onNodeSelected?: (uuid: string | null) => any
onNodeSelected?: (uuid: string | null) => void
onNodeClicked?: (uuid: string) => void
}
export interface NodeUuidCommands<ReturnType> {
[NAME]: {
/**
* Add uuid mark
*/
setUuid: (uuid: string) => ReturnType
/**
* Unset uuid mark
*/
unsetUuid: () => ReturnType
}
}
declare module '@tiptap/core' {
interface Commands<ReturnType> {
[NAME]: {
/**
* Add uuid mark
*/
setUuid: (uuid: string) => ReturnType
/**
* Unset uuid mark
*/
unsetUuid: () => ReturnType
}
}
interface Commands<ReturnType> extends NodeUuidCommands<ReturnType> {}
}
export interface NodeUuidStorage {
@ -67,6 +71,30 @@ export const NodeUuidExtension = Mark.create<NodeUuidOptions, NodeUuidStorage>({
return ['span', mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), 0]
},
addProseMirrorPlugins () {
const options = this.options
const plugins = [
...(this.parent?.() ?? []),
new Plugin({
key: new PluginKey('handle-node-uuid-click-plugin'),
props: {
handleClick (view) {
const { schema } = view.state
const attrs = getMarkAttributes(view.state, schema.marks[NAME])
const nodeUuid = attrs?.[NAME]
if (nodeUuid !== null || nodeUuid !== undefined) {
options.onNodeClicked?.(nodeUuid)
}
}
}
})
]
return plugins
},
addCommands () {
return {
setUuid:

2
packages/text-editor/src/components/extensions.ts
View File

@ -19,6 +19,7 @@ import Typography from '@tiptap/extension-typography'
import { CompletionOptions } from '../Completion'
import MentionList from './MentionList.svelte'
import { SvelteRenderer } from './SvelteRenderer'
import { NodeUuidExtension } from './extension/nodeUuid'
export const tableExtensions = [
Table.configure({
@ -76,6 +77,7 @@ export const defaultExtensions: AnyExtension[] = [
openOnClick: true,
HTMLAttributes: { class: 'cursor-pointer', rel: 'noopener noreferrer', target: '_blank' }
}),
NodeUuidExtension,
...tableExtensions
// ...taskListExtensions // Disable since tasks are not working properly now.
]

7
packages/text-editor/src/index.ts
View File

@ -31,6 +31,13 @@ export * from './types'
export { default as Collaboration } from './components/Collaboration.svelte'
export { default as StyleButton } from './components/StyleButton.svelte'
export {
NodeHighlightExtension,
NodeHighlightExtensionOptions,
NodeHighlightType
} from './components/extension/nodeHighlight'
export { NodeUuidCommands, NodeUuidExtension, NodeUuidOptions, NodeUuidStorage } from './components/extension/nodeUuid'
addStringsLoader(textEditorId, async (lang: string) => {
return await import(`../lang/${lang}.json`)
})

3
packages/text-editor/src/types.ts
View File

@ -1,6 +1,6 @@
import { Asset, IntlString, Resource } from '@hcengineering/platform'
import { Doc } from '@hcengineering/core'
import type { AnyComponent, AnySvelteComponent } from '@hcengineering/ui'
import type { AnySvelteComponent } from '@hcengineering/ui'
/**
* @public
@ -61,5 +61,4 @@ export interface TextNodeAction {
id: string
label?: IntlString
icon: Asset | AnySvelteComponent
panel: AnyComponent
}

8
packages/theme/styles/_text-editor.scss
View File

@ -14,6 +14,14 @@
.text-editor-highlighted-node-success {
background-color: var(--theme-won-color);
}
.text-editor-popup {
background-color: var(--theme-comp-header-color);
border-radius: 0.5rem;
box-shadow: var(--theme-popup-shadow);
z-index: 1;
}
.proseH1 {
margin-block-start: 1.25rem;
margin-block-end: 1.25rem;

1
plugins/view-resources/src/components/ObjectPresenter.svelte
View File

@ -76,5 +76,6 @@
{noUnderline}
{...props}
on:accent-color
on:close
/>
{/if}