mirrors/mostlymatter
1
0
Форкнуть 0
Код Задачи Запросы на слияние Действия Пакеты Проекты Релизы Вики Активность

Add code block actions plugin extensibility (#24348)

Просмотр исходного кода 
* Add code block actions plugin extensibility

* Fixing tests

* Fixing linter errors

* Move Plugin components left of label

---------

Co-authored-by: Christopher Speller <crspeller@gmail.com>
Этот коммит содержится в:
Jesús Espino
2023-08-29 23:51:37 +02:00
коммит произвёл GitHub
родитель dbb39e44cc
Коммит 8c8b8b7e79
6 изменённых файлов: 1029 добавлений и 519 удалений
Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

464
webapp/channels/src/components/code_block/__snapshots__/code_block.test.tsx.snap
Просмотреть файл

@@ -1,6 +1,18 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`codeBlock should render html code block with proper indentation after syntax highlighting 1`] = `
<Provider
store={
Object {
"clearActions": [Function],
"dispatch": [Function],
"getActions": [Function],
"getState": [Function],
"replaceReducer": [Function],
"subscribe": [Function],
}
}
>
<IntlProvider
defaultFormats={Object {}}
defaultLocale="en"
@@ -175,9 +187,42 @@ exports[`codeBlock should render html code block with proper indentation after s
</div>
</CodeBlock>
</IntlProvider>
</Provider>
`;
exports[`codeBlock should render html code block with proper indentation before syntax highlighting 1`] = `
<Provider
store={
Object {
"clearActions": [Function],
"dispatch": [Function],
"getActions": [Function],
"getState": [Function],
"replaceReducer": [Function],
"subscribe": [Function],
}
}
>
<IntlProvider
defaultFormats={Object {}}
defaultLocale="en"
fallbackOnEmptyString={true}
formats={Object {}}
locale="en"
messages={Object {}}
onError={[Function]}
onWarn={[Function]}
textComponent={Symbol(react.fragment)}
>
<CodeBlock
code="\`\`\`html
<div className='myClass'>
<a href='https://randomgibberishurl.com'>ClickMe</a>
</div>
\`\`\`
"
language="html"
>
<div
className="post-code"
>
@@ -193,7 +238,110 @@ exports[`codeBlock should render html code block with proper indentation before
\`\`\`
"
placement="top"
>
<OverlayTrigger
defaultOverlayShown={false}
delayShow={400}
overlay={
<Tooltip
bsClass="tooltip"
id="copyButton"
placement="right"
>
<Memo(MemoizedFormattedMessage)
defaultMessage="Copy code"
id="copy.code.message"
/>
</Tooltip>
}
placement="top"
shouldUpdatePosition={true}
trigger={
Array [
"hover",
"focus",
]
}
>
<OverlayTrigger
defaultOverlayShown={false}
delayShow={400}
overlay={
<OverlayWrapper
bsClass="tooltip"
id="copyButton"
intl={
Object {
"$t": [Function],
"defaultFormats": Object {},
"defaultLocale": "en",
"defaultRichTextElements": undefined,
"fallbackOnEmptyString": true,
"formatDate": [Function],
"formatDateTimeRange": [Function],
"formatDateToParts": [Function],
"formatDisplayName": [Function],
"formatList": [Function],
"formatListToParts": [Function],
"formatMessage": [Function],
"formatNumber": [Function],
"formatNumberToParts": [Function],
"formatPlural": [Function],
"formatRelativeTime": [Function],
"formatTime": [Function],
"formatTimeToParts": [Function],
"formats": Object {},
"formatters": Object {
"getDateTimeFormat": [Function],
"getDisplayNames": [Function],
"getListFormat": [Function],
"getMessageFormat": [Function],
"getNumberFormat": [Function],
"getPluralRules": [Function],
"getRelativeTimeFormat": [Function],
},
"locale": "en",
"messages": Object {},
"onError": [Function],
"onWarn": [Function],
"textComponent": Symbol(react.fragment),
"timeZone": undefined,
"wrapRichTextChunksInFragment": undefined,
}
}
placement="right"
>
<Memo(MemoizedFormattedMessage)
defaultMessage="Copy code"
id="copy.code.message"
/>
</OverlayWrapper>
}
placement="top"
shouldUpdatePosition={true}
trigger={
Array [
"hover",
"focus",
]
}
>
<span
className="post-code__clipboard"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
>
<i
className="icon icon-content-copy"
role="button"
/>
</span>
</OverlayTrigger>
</OverlayTrigger>
</CopyButton>
<span
className="post-code__language"
>
@@ -217,9 +365,9 @@ exports[`codeBlock should render html code block with proper indentation before
dangerouslySetInnerHTML={
Object {
"__html": "\`\`\`html
&lt;div className=&apos;myClass&apos;&gt;
&lt;a href=&apos;https://randomgibberishurl.com&apos;&gt;ClickMe&lt;/a&gt;
&lt;/div&gt;
<span class=\\"hljs-tag\\">&lt;<span class=\\"hljs-name\\">div</span> <span class=\\"hljs-attr\\">className</span>=<span class=\\"hljs-string\\">&#x27;myClass&#x27;</span>&gt;</span>
<span class=\\"hljs-tag\\">&lt;<span class=\\"hljs-name\\">a</span> <span class=\\"hljs-attr\\">href</span>=<span class=\\"hljs-string\\">&#x27;https://randomgibberishurl.com&#x27;</span>&gt;</span>ClickMe<span class=\\"hljs-tag\\">&lt;/<span class=\\"hljs-name\\">a</span>&gt;</span>
<span class=\\"hljs-tag\\">&lt;/<span class=\\"hljs-name\\">div</span>&gt;</span>
\`\`\`
",
}
@@ -227,9 +375,24 @@ exports[`codeBlock should render html code block with proper indentation before
/>
</div>
</div>
</CodeBlock>
</IntlProvider>
</Provider>
`;
exports[`codeBlock should render typescript code block after syntax highlighting 1`] = `
<Provider
store={
Object {
"clearActions": [Function],
"dispatch": [Function],
"getActions": [Function],
"getState": [Function],
"replaceReducer": [Function],
"subscribe": [Function],
}
}
>
<IntlProvider
defaultFormats={Object {}}
defaultLocale="en"
@@ -404,9 +567,42 @@ const myFunction = () =&gt; {
</div>
</CodeBlock>
</IntlProvider>
</Provider>
`;
exports[`codeBlock should render typescript code block before syntax highlighting 1`] = `
<Provider
store={
Object {
"clearActions": [Function],
"dispatch": [Function],
"getActions": [Function],
"getState": [Function],
"replaceReducer": [Function],
"subscribe": [Function],
}
}
>
<IntlProvider
defaultFormats={Object {}}
defaultLocale="en"
fallbackOnEmptyString={true}
formats={Object {}}
locale="en"
messages={Object {}}
onError={[Function]}
onWarn={[Function]}
textComponent={Symbol(react.fragment)}
>
<CodeBlock
code="\`\`\`typescript
const myFunction = () => {
console.log('This is a meaningful function');
};
\`\`\`
"
language="typescript"
>
<div
className="post-code"
>
@@ -422,7 +618,110 @@ const myFunction = () => {
\`\`\`
"
placement="top"
>
<OverlayTrigger
defaultOverlayShown={false}
delayShow={400}
overlay={
<Tooltip
bsClass="tooltip"
id="copyButton"
placement="right"
>
<Memo(MemoizedFormattedMessage)
defaultMessage="Copy code"
id="copy.code.message"
/>
</Tooltip>
}
placement="top"
shouldUpdatePosition={true}
trigger={
Array [
"hover",
"focus",
]
}
>
<OverlayTrigger
defaultOverlayShown={false}
delayShow={400}
overlay={
<OverlayWrapper
bsClass="tooltip"
id="copyButton"
intl={
Object {
"$t": [Function],
"defaultFormats": Object {},
"defaultLocale": "en",
"defaultRichTextElements": undefined,
"fallbackOnEmptyString": true,
"formatDate": [Function],
"formatDateTimeRange": [Function],
"formatDateToParts": [Function],
"formatDisplayName": [Function],
"formatList": [Function],
"formatListToParts": [Function],
"formatMessage": [Function],
"formatNumber": [Function],
"formatNumberToParts": [Function],
"formatPlural": [Function],
"formatRelativeTime": [Function],
"formatTime": [Function],
"formatTimeToParts": [Function],
"formats": Object {},
"formatters": Object {
"getDateTimeFormat": [Function],
"getDisplayNames": [Function],
"getListFormat": [Function],
"getMessageFormat": [Function],
"getNumberFormat": [Function],
"getPluralRules": [Function],
"getRelativeTimeFormat": [Function],
},
"locale": "en",
"messages": Object {},
"onError": [Function],
"onWarn": [Function],
"textComponent": Symbol(react.fragment),
"timeZone": undefined,
"wrapRichTextChunksInFragment": undefined,
}
}
placement="right"
>
<Memo(MemoizedFormattedMessage)
defaultMessage="Copy code"
id="copy.code.message"
/>
</OverlayWrapper>
}
placement="top"
shouldUpdatePosition={true}
trigger={
Array [
"hover",
"focus",
]
}
>
<span
className="post-code__clipboard"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
>
<i
className="icon icon-content-copy"
role="button"
/>
</span>
</OverlayTrigger>
</OverlayTrigger>
</CopyButton>
<span
className="post-code__language"
>
@@ -445,20 +744,35 @@ const myFunction = () => {
<code
dangerouslySetInnerHTML={
Object {
"__html": "\`\`\`typescript
"__html": "<span class=\\"hljs-string\\">\`\`</span><span class=\\"hljs-string\\">\`typescript
const myFunction = () =&gt; {
console.log(&apos;This is a meaningful function&apos;);
console.log(&#x27;This is a meaningful function&#x27;);
};
\`\`\`
\`</span><span class=\\"hljs-string\\">\`\`</span>
",
}
}
/>
</div>
</div>
</CodeBlock>
</IntlProvider>
</Provider>
`;
exports[`codeBlock should render unknown language after syntax highlighting 1`] = `
<Provider
store={
Object {
"clearActions": [Function],
"dispatch": [Function],
"getActions": [Function],
"getState": [Function],
"replaceReducer": [Function],
"subscribe": [Function],
}
}
>
<IntlProvider
defaultFormats={Object {}}
defaultLocale="en"
@@ -615,9 +929,41 @@ it shouldn&apos;t highlight, it&apos;s just garbage
</div>
</CodeBlock>
</IntlProvider>
</Provider>
`;
exports[`codeBlock should render unknown language before syntax highlighting 1`] = `
<Provider
store={
Object {
"clearActions": [Function],
"dispatch": [Function],
"getActions": [Function],
"getState": [Function],
"replaceReducer": [Function],
"subscribe": [Function],
}
}
>
<IntlProvider
defaultFormats={Object {}}
defaultLocale="en"
fallbackOnEmptyString={true}
formats={Object {}}
locale="en"
messages={Object {}}
onError={[Function]}
onWarn={[Function]}
textComponent={Symbol(react.fragment)}
>
<CodeBlock
code="\`\`\`unknownLanguage
this is my unknown language
it shouldn't highlight, it's just garbage
\`\`\`
"
language="unknownLanguage"
>
<div
className="post-code"
>
@@ -632,7 +978,110 @@ it shouldn't highlight, it's just garbage
\`\`\`
"
placement="top"
>
<OverlayTrigger
defaultOverlayShown={false}
delayShow={400}
overlay={
<Tooltip
bsClass="tooltip"
id="copyButton"
placement="right"
>
<Memo(MemoizedFormattedMessage)
defaultMessage="Copy code"
id="copy.code.message"
/>
</Tooltip>
}
placement="top"
shouldUpdatePosition={true}
trigger={
Array [
"hover",
"focus",
]
}
>
<OverlayTrigger
defaultOverlayShown={false}
delayShow={400}
overlay={
<OverlayWrapper
bsClass="tooltip"
id="copyButton"
intl={
Object {
"$t": [Function],
"defaultFormats": Object {},
"defaultLocale": "en",
"defaultRichTextElements": undefined,
"fallbackOnEmptyString": true,
"formatDate": [Function],
"formatDateTimeRange": [Function],
"formatDateToParts": [Function],
"formatDisplayName": [Function],
"formatList": [Function],
"formatListToParts": [Function],
"formatMessage": [Function],
"formatNumber": [Function],
"formatNumberToParts": [Function],
"formatPlural": [Function],
"formatRelativeTime": [Function],
"formatTime": [Function],
"formatTimeToParts": [Function],
"formats": Object {},
"formatters": Object {
"getDateTimeFormat": [Function],
"getDisplayNames": [Function],
"getListFormat": [Function],
"getMessageFormat": [Function],
"getNumberFormat": [Function],
"getPluralRules": [Function],
"getRelativeTimeFormat": [Function],
},
"locale": "en",
"messages": Object {},
"onError": [Function],
"onWarn": [Function],
"textComponent": Symbol(react.fragment),
"timeZone": undefined,
"wrapRichTextChunksInFragment": undefined,
}
}
placement="right"
>
<Memo(MemoizedFormattedMessage)
defaultMessage="Copy code"
id="copy.code.message"
/>
</OverlayWrapper>
}
placement="top"
shouldUpdatePosition={true}
trigger={
Array [
"hover",
"focus",
]
}
>
<span
className="post-code__clipboard"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
>
<i
className="icon icon-content-copy"
role="button"
/>
</span>
</OverlayTrigger>
</OverlayTrigger>
</CopyButton>
</div>
<div
className="hljs"
@@ -650,4 +1099,7 @@ it shouldn&apos;t highlight, it&apos;s just garbage
/>
</div>
</div>
</CodeBlock>
</IntlProvider>
</Provider>
`;

53
webapp/channels/src/components/code_block/code_block.test.tsx
Просмотреть файл

@@ -1,10 +1,13 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import {mount, ReactWrapper, shallow} from 'enzyme';
import {mount, ReactWrapper} from 'enzyme';
import React from 'react';
import {act} from 'react-dom/test-utils';
import {IntlProvider} from 'react-intl';
import {Provider as ReduxProvider} from 'react-redux';
import mockStore from 'tests/test_store';
import CodeBlock from './code_block';
@@ -20,6 +23,11 @@ const actImmediate = (wrapper: ReactWrapper) =>
);
describe('codeBlock', () => {
const state = {
plugins: {components: {CodeBlockAction: []}},
};
const store = mockStore(state);
test('should render typescript code block before syntax highlighting', async () => {
const language = 'typescript';
const input = `\`\`\`${language}
@@ -29,12 +37,17 @@ const myFunction = () => {
\`\`\`
`;
const wrapper = shallow(
const wrapper = mount(
<ReduxProvider store={store}>
<IntlProvider locale='en'>
<CodeBlock
code={input}
language={language}
/>,
/>
</IntlProvider>
</ReduxProvider>,
);
await actImmediate(wrapper);
const languageHeader = wrapper.find('span.post-code__language').text();
const lineNumbersDiv = wrapper.find('.post-code__line-numbers').exists();
@@ -55,12 +68,14 @@ const myFunction = () => {
`;
const wrapper = mount(
<ReduxProvider store={store}>
<IntlProvider locale='en'>
<CodeBlock
code={input}
language={language}
/>
</IntlProvider>,
</IntlProvider>
</ReduxProvider>,
);
await actImmediate(wrapper);
@@ -73,7 +88,7 @@ const myFunction = () => {
expect(wrapper).toMatchSnapshot();
});
test('should render html code block with proper indentation before syntax highlighting', () => {
test('should render html code block with proper indentation before syntax highlighting', async () => {
const language = 'html';
const input = `\`\`\`${language}
<div className='myClass'>
@@ -82,12 +97,17 @@ const myFunction = () => {
\`\`\`
`;
const wrapper = shallow(
const wrapper = mount(
<ReduxProvider store={store}>
<IntlProvider locale='en'>
<CodeBlock
code={input}
language={language}
/>,
/>
</IntlProvider>
</ReduxProvider>,
);
await actImmediate(wrapper);
const languageHeader = wrapper.find('span.post-code__language').text();
const lineNumbersDiv = wrapper.find('.post-code__line-numbers').exists();
@@ -107,12 +127,14 @@ const myFunction = () => {
`;
const wrapper = mount(
<ReduxProvider store={store}>
<IntlProvider locale='en'>
<CodeBlock
code={input}
language={language}
/>
</IntlProvider>,
</IntlProvider>
</ReduxProvider>,
);
await actImmediate(wrapper);
@@ -124,7 +146,7 @@ const myFunction = () => {
expect(wrapper).toMatchSnapshot();
});
test('should render unknown language before syntax highlighting', () => {
test('should render unknown language before syntax highlighting', async () => {
const language = 'unknownLanguage';
const input = `\`\`\`${language}
this is my unknown language
@@ -132,12 +154,17 @@ it shouldn't highlight, it's just garbage
\`\`\`
`;
const wrapper = shallow(
const wrapper = mount(
<ReduxProvider store={store}>
<IntlProvider locale='en'>
<CodeBlock
code={input}
language={language}
/>,
/>
</IntlProvider>
</ReduxProvider>,
);
await actImmediate(wrapper);
const languageHeader = wrapper.find('span.post-code__language').exists();
const lineNumbersDiv = wrapper.find('.post-code__line-numbers').exists();
@@ -156,12 +183,14 @@ it shouldn't highlight, it's just garbage
`;
const wrapper = mount(
<ReduxProvider store={store}>
<IntlProvider locale='en'>
<CodeBlock
code={input}
language={language}
/>
</IntlProvider>,
</IntlProvider>
</ReduxProvider>,
);
await actImmediate(wrapper);

21
webapp/channels/src/components/code_block/code_block.tsx
Просмотреть файл

@@ -3,6 +3,10 @@
import React, {useCallback, useEffect, useState} from 'react';
import {useSelector} from 'react-redux';
import {GlobalState} from 'types/store';
import CopyButton from 'components/copy_button';
import * as SyntaxHighlighting from 'utils/syntax_highlighting';
@@ -67,10 +71,27 @@ const CodeBlock: React.FC<Props> = ({code, language, searchedContent}: Props) =>
htmlContent = `${searchedContent} ${content}`;
}
const codeBlockActions = useSelector((state: GlobalState) => state.plugins.components.CodeBlockAction);
const pluginItems = codeBlockActions?.
map((item) => {
if (!item.component) {
return null;
}
const Component = item.component as any;
return (
<Component
key={item.id}
code={code}
/>
);
});
return (
<div className={className}>
<div className='post-code__overlay'>
<CopyButton content={code}/>
{pluginItems}
{header}
</div>
<div className='hljs'>

6
webapp/channels/src/plugins/registry.ts
Просмотреть файл

@@ -508,6 +508,12 @@ export default class PluginRegistry {
return dispatchPluginComponentAction('PostEditorAction', this.id, component);
});
// Register a component to the add to the code block header.
// Accepts a React component. Returns a unique identifier.
registerCodeBlockActionComponent = reArg(['component'], ({component}: DPluginComponentProp) => {
return dispatchPluginComponentAction('CodeBlockAction', this.id, component);
});
// Register a component to the add to the new messages separator.
// Accepts a React component. Returns a unique identifier.
registerNewMessagesSeparatorActionComponent = reArg(['component'], ({component}: DPluginComponentProp) => {

1
webapp/channels/src/reducers/plugins/index.ts
Просмотреть файл

@@ -183,6 +183,7 @@ const initialComponents: PluginsState['components'] = {
PostDropdownMenu: [],
PostAction: [],
PostEditorAction: [],
CodeBlockAction: [],
NewMessagesSeparatorAction: [],
Product: [],
RightHandSidebarComponent: [],

1
webapp/channels/src/types/store/plugins.ts
Просмотреть файл

@@ -29,6 +29,7 @@ export type PluginsState = {
PostDropdownMenu: PluginComponent[];
PostAction: PluginComponent[];
PostEditorAction: PluginComponent[];
CodeBlockAction: PluginComponent[];
NewMessagesSeparatorAction: PluginComponent[];
FilePreview: PluginComponent[];
MainMenu: PluginComponent[];