From d2f2a1837638f035865a9ff260255c43af4be9b6 Mon Sep 17 00:00:00 2001 From: Denis Bykhov <80476319+BykhovDenis@users.noreply.github.com> Date: Thu, 28 Apr 2022 16:05:28 +0600 Subject: [PATCH] Link presenters init (#1579) Signed-off-by: Denis Bykhov <80476319+BykhovDenis@users.noreply.github.com> --- models/view/src/index.ts | 21 +++- models/view/src/plugin.ts | 4 +- .../src/components/message/Nodes.svelte | 12 +++ packages/theme/styles/_layouts.scss | 2 + .../src/components/Message.svelte | 26 ++++- plugins/view-assets/lang/en.json | 4 +- plugins/view-assets/lang/ru.json | 4 +- .../src/components/LinkPresenter.svelte | 40 +++++++ .../src/components/icons/Play.svelte | 26 +++++ .../linkPresenters/GithubPresenter.svelte | 102 ++++++++++++++++++ .../linkPresenters/YoutubePresenter.svelte | 99 +++++++++++++++++ plugins/view-resources/src/index.ts | 7 +- plugins/view-resources/src/plugin.ts | 4 +- plugins/view/src/index.ts | 11 +- 14 files changed, 354 insertions(+), 8 deletions(-) create mode 100644 plugins/view-resources/src/components/LinkPresenter.svelte create mode 100644 plugins/view-resources/src/components/icons/Play.svelte create mode 100644 plugins/view-resources/src/components/linkPresenters/GithubPresenter.svelte create mode 100644 plugins/view-resources/src/components/linkPresenters/YoutubePresenter.svelte diff --git a/models/view/src/index.ts b/models/view/src/index.ts index 89c1238621..65b3f50cbb 100644 --- a/models/view/src/index.ts +++ b/models/view/src/index.ts @@ -27,6 +27,7 @@ import type { HTMLPresenter, IgnoreActions, KeyBinding, + LinkPresenter, ObjectEditor, ObjectEditorHeader, ObjectFactory, @@ -199,6 +200,13 @@ export class TPreviewPresenter extends TClass implements PreviewPresenter { presenter!: AnyComponent } +@Model(view.class.LinkPresenter, core.class.Doc, DOMAIN_MODEL) +export class TLinkPresenter extends TDoc implements LinkPresenter { + pattern!: string + + component!: AnyComponent +} + export function createModel (builder: Builder): void { builder.createModel( TAttributeEditor, @@ -216,7 +224,8 @@ export function createModel (builder: Builder): void { TSpaceName, TTextPresenter, TIgnoreActions, - TPreviewPresenter + TPreviewPresenter, + TLinkPresenter ) classPresenter(builder, core.class.TypeString, view.component.StringPresenter, view.component.StringEditor) @@ -308,6 +317,16 @@ export function createModel (builder: Builder): void { singleInput: true }) + builder.createDoc(view.class.LinkPresenter, core.space.Model, { + pattern: '(www.)?youtube.(com|ru)', + component: view.component.YoutubePresenter + }) + + builder.createDoc(view.class.LinkPresenter, core.space.Model, { + pattern: '(www.)?github.com/', + component: view.component.GithubPresenter + }) + // Should be contributed via individual plugins. // actionTarget(builder, view.action.Open, core.class.Doc, { mode: ['browser', 'context'] }) } diff --git a/models/view/src/plugin.ts b/models/view/src/plugin.ts index d8260d150f..70c8325cb9 100644 --- a/models/view/src/plugin.ts +++ b/models/view/src/plugin.ts @@ -71,7 +71,9 @@ export default mergeIds(viewId, view, { DateEditor: '' as AnyComponent, DatePresenter: '' as AnyComponent, TableView: '' as AnyComponent, - RolePresenter: '' as AnyComponent + RolePresenter: '' as AnyComponent, + YoutubePresenter: '' as AnyComponent, + GithubPresenter: '' as AnyComponent }, string: { Table: '' as IntlString, diff --git a/packages/presentation/src/components/message/Nodes.svelte b/packages/presentation/src/components/message/Nodes.svelte index 9084b5d5d3..66a16747ba 100644 --- a/packages/presentation/src/components/message/Nodes.svelte +++ b/packages/presentation/src/components/message/Nodes.svelte @@ -42,6 +42,8 @@ export let nodes: NodeListOf
{:else if node.nodeName === 'HR'}
+ {:else if node.nodeName === 'IMG'} +
{@html node.outerHTML}
{:else if node.nodeName === 'H1'}

{:else if node.nodeName === 'H2'} @@ -70,3 +72,13 @@ export let nodes: NodeListOf {/if} {/each} {/if} + + \ No newline at end of file diff --git a/packages/theme/styles/_layouts.scss b/packages/theme/styles/_layouts.scss index cf8c89fcd8..495005d9a2 100644 --- a/packages/theme/styles/_layouts.scss +++ b/packages/theme/styles/_layouts.scss @@ -437,6 +437,8 @@ p:last-child { margin-block-end: 0; } .min-w-min { min-width: min-content; } .min-h-0 { min-height: 0; } .max-h-125 { max-height: 31.25rem; } +.max-h-60 { max-height: 15rem; } +.max-w-60 { max-width: 15rem; } .clear-mins { min-width: 0; min-height: 0; diff --git a/plugins/chunter-resources/src/components/Message.svelte b/plugins/chunter-resources/src/components/Message.svelte index 88d5160144..e332c2bdad 100644 --- a/plugins/chunter-resources/src/components/Message.svelte +++ b/plugins/chunter-resources/src/components/Message.svelte @@ -23,7 +23,7 @@ import { Avatar, getClient, MessageViewer } from '@anticrm/presentation' import ui, { ActionIcon, IconMoreH, Menu, showPopup, Label, Tooltip, Button } from '@anticrm/ui' import { Action } from '@anticrm/view' - import { getActions } from '@anticrm/view-resources' + import { getActions, LinkPresenter } from '@anticrm/view-resources' import { createEventDispatcher } from 'svelte' import { AddMessageToSaved, DeleteMessageFromSaved, UnpinMessage } from '../index' import chunter from '../plugin' @@ -152,6 +152,27 @@ $: parentMessage = message as Message $: hasReplies = (parentMessage?.replies?.length ?? 0) > 0 + + $: links = getLinks(message.content) + + function getLinks (content: string): HTMLLinkElement[] { + const parser = new DOMParser() + const parent = parser.parseFromString(content, 'text/html').firstChild?.childNodes[1] as HTMLElement + return parseLinks(parent.childNodes) + } + + function parseLinks (nodes: NodeListOf): HTMLLinkElement[] { + const res: HTMLLinkElement[] = [] + nodes.forEach((p) => { + if (p.nodeType !== Node.TEXT_NODE) { + if (p.nodeName === 'A') { + res.push(p as HTMLLinkElement) + } + res.push(...parseLinks(p.childNodes)) + } + }) + return res + }
@@ -189,6 +210,9 @@
{/if} + {#each links as link} + + {/each} {/if} {#if reactions || (!thread && hasReplies)}
diff --git a/plugins/view-assets/lang/en.json b/plugins/view-assets/lang/en.json index 20230f056b..d0b9f5068d 100644 --- a/plugins/view-assets/lang/en.json +++ b/plugins/view-assets/lang/en.json @@ -13,6 +13,8 @@ "Role": "Role", "DeleteObject": "Delete object", "DeleteObjectConfirm": "Do you want to delete this {count, plural, =1 {object} other {# objects}}?", - "Open": "Open" + "Open": "Open", + "Assignees": "Assignees", + "Labels": "Labels" } } diff --git a/plugins/view-assets/lang/ru.json b/plugins/view-assets/lang/ru.json index 66a9bf3549..c489e1e92a 100644 --- a/plugins/view-assets/lang/ru.json +++ b/plugins/view-assets/lang/ru.json @@ -13,6 +13,8 @@ "Role": "Роль", "DeleteObject": "Удалить объект", "DeleteObjectConfirm": "Вы действительно хотите удалить {count, plural, =1 {этот обьект} other {эти # обьекта}}?", - "Open": "Открыть" + "Open": "Открыть", + "Assignees": "Исполнители", + "Labels": "Метки" } } diff --git a/plugins/view-resources/src/components/LinkPresenter.svelte b/plugins/view-resources/src/components/LinkPresenter.svelte new file mode 100644 index 0000000000..a1ac5cbda4 --- /dev/null +++ b/plugins/view-resources/src/components/LinkPresenter.svelte @@ -0,0 +1,40 @@ + + + +{#await getPresenter(link.href) then presenter} + {#if presenter} + + {/if} +{/await} diff --git a/plugins/view-resources/src/components/icons/Play.svelte b/plugins/view-resources/src/components/icons/Play.svelte new file mode 100644 index 0000000000..55b64c9907 --- /dev/null +++ b/plugins/view-resources/src/components/icons/Play.svelte @@ -0,0 +1,26 @@ + + + + + + + + + + diff --git a/plugins/view-resources/src/components/linkPresenters/GithubPresenter.svelte b/plugins/view-resources/src/components/linkPresenters/GithubPresenter.svelte new file mode 100644 index 0000000000..1ef18e6ab2 --- /dev/null +++ b/plugins/view-resources/src/components/linkPresenters/GithubPresenter.svelte @@ -0,0 +1,102 @@ + + + +
+
+ {#await getData(href) then data} +
+ #{data.number} {data.title} + {#if data.body} +
+ +
+ {/if} +
+ {#if data.assignees.length} +
+
+
+ {#each data.assignees as assignee} + @{assignee.login} + {/each} +
+
+ {/if} + {#if data.labels.length} +
+
+
+ {#each data.labels as label, i} + {#if i}, {/if} + {label.name} + {/each} +
+
+ {/if} +
+
+ {/await} +
+ + \ No newline at end of file diff --git a/plugins/view-resources/src/components/linkPresenters/YoutubePresenter.svelte b/plugins/view-resources/src/components/linkPresenters/YoutubePresenter.svelte new file mode 100644 index 0000000000..cd988b2fb8 --- /dev/null +++ b/plugins/view-resources/src/components/linkPresenters/YoutubePresenter.svelte @@ -0,0 +1,99 @@ + + + +
+
+ {#await getData(href) then data} +
+
{data.title}
+
{data.author}
+ {#if !played} +
{ + played = true + }} + > + {data.title}/ +
+
+ {:else} +
+ {@html data.html} +
+ {/if} +
+ {/await} +
+ + diff --git a/plugins/view-resources/src/index.ts b/plugins/view-resources/src/index.ts index ab1aefd25f..4812748984 100644 --- a/plugins/view-resources/src/index.ts +++ b/plugins/view-resources/src/index.ts @@ -35,12 +35,15 @@ import Table from './components/Table.svelte' import TableView from './components/TableView.svelte' import TimestampPresenter from './components/TimestampPresenter.svelte' import UpDownNavigator from './components/UpDownNavigator.svelte' +import GithubPresenter from './components/linkPresenters/GithubPresenter.svelte' +import YoutubePresenter from './components/linkPresenters/YoutubePresenter.svelte' export { getActions } from './actions' export { default as ActionContext } from './components/ActionContext.svelte' export { default as ActionHandler } from './components/ActionHandler.svelte' export { default as ContextMenu } from './components/Menu.svelte' export { default as TableBrowser } from './components/TableBrowser.svelte' +export { default as LinkPresenter } from './components/LinkPresenter.svelte' export * from './context' export * from './selection' export { buildModel, getCollectionCounter, getObjectPresenter, LoadingProps } from './utils' @@ -64,6 +67,8 @@ export default async (): Promise => ({ ObjectPresenter, EditDoc, HTMLPresenter, - IntlStringPresenter + IntlStringPresenter, + GithubPresenter, + YoutubePresenter } }) diff --git a/plugins/view-resources/src/plugin.ts b/plugins/view-resources/src/plugin.ts index 44d6d76721..a517181f28 100644 --- a/plugins/view-resources/src/plugin.ts +++ b/plugins/view-resources/src/plugin.ts @@ -28,6 +28,8 @@ export default mergeIds(viewId, view, { LabelNA: '' as IntlString, ChooseAColor: '' as IntlString, DeleteObject: '' as IntlString, - DeleteObjectConfirm: '' as IntlString + DeleteObjectConfirm: '' as IntlString, + Assignees: '' as IntlString, + Labels: '' as IntlString } }) diff --git a/plugins/view/src/index.ts b/plugins/view/src/index.ts index e0ed26522a..0116864399 100644 --- a/plugins/view/src/index.ts +++ b/plugins/view/src/index.ts @@ -97,6 +97,14 @@ export interface Viewlet extends Doc { config: any } +/** + * @public + */ +export interface LinkPresenter extends Doc { + pattern: string + component: AnyComponent +} + /** * @public * @@ -264,7 +272,8 @@ const view = plugin(viewId, { ViewletDescriptor: '' as Ref>, Viewlet: '' as Ref>, Action: '' as Ref>, - ActionTarget: '' as Ref> + ActionTarget: '' as Ref>, + LinkPresenter: '' as Ref> }, viewlet: { Table: '' as Ref