10075314064

Committed 24 Jul 2024 10:53AM UTC coverage: 31.871% (-0.03%) from 31.896%

Build # 10075314064

Build Type

push

github

Committed by

web-flow

Commit Message

Merge pull request #9542 from ForumMagnum/master

[EA] Deploy ForumNoSRR -> DeferRender change

Run Details

4931 of 40542 branches covered (12.16%)

Branch coverage included in aggregate %.

34 of 68 new or added lines in 29 files covered. (50.0%)

1 existing line in 1 file now uncovered.

28851 of 65455 relevant lines covered (44.08%)

179.72 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

0.0

/packages/lesswrong/components/editor/DraftJSEditor.tsx

import React, { Component } from 'react';
import { registerComponent } from '../../lib/vulcan-lib';
import Editor, { composeDecorators } from 'draft-js-plugins-editor';
import createInlineToolbarPlugin, { Separator } from 'draft-js-inline-toolbar-plugin';
import createImagePlugin from 'draft-js-image-plugin';
import createAlignmentPlugin from 'draft-js-alignment-plugin';
import createFocusPlugin from 'draft-js-focus-plugin';
import createResizeablePlugin from 'draft-js-resizeable-plugin';
import createRichButtonsPlugin from 'draft-js-richbuttons-plugin';
import createBlockBreakoutPlugin from 'draft-js-block-breakout-plugin'
import createDividerPlugin from './draftjs-plugins/divider';
import createMathjaxPlugin from './draftjs-plugins/draft-js-mathjax-plugin/src'
import createMarkdownShortcutsPlugin from './draftjs-plugins/markdown-shortcuts-plugin';
import { withTheme } from '@material-ui/core/styles';
import createLinkPlugin from 'draft-js-anchor-plugin';
import LinkButton from './draftjs-plugins/LinkButton'
import { myKeyBindingFn } from './draftjs-plugins/keyBindings.js'
import createLinkifyPlugin from './draftjs-plugins/linkifyPlugin'
import ImageButton from './draftjs-plugins/image/ImageButton';
import { Map } from 'immutable';
import { createBlockStyleButton, ItalicButton, BoldButton, UnderlineButton, BlockquoteButton } from 'draft-js-buttons';
import { isClient } from '../../lib/executionEnvironment';
import { styleMap } from "./draftJsEditorStyleMap";
import * as _ from 'underscore';
import DeferRender from '../common/DeferRender.js';

function customBlockStyleFn(contentBlock: AnyBecauseTodo) {
  const type = contentBlock.getType();
  if (type === 'spoiler') {
    return 'spoiler';
  }
}

const initializePlugins = (commentEditor: AnyBecauseTodo) => {
  const HeadlineOneButton = createBlockStyleButton({
    blockType: 'header-one',
    children: (
      <svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
        <path d="M5 4v3h5.5v12h3V7H19V4z"/>
        <path d="M0 0h24v24H0V0z" fill="none"/>
      </svg>),
  });
  
  const HeadlineTwoButton = createBlockStyleButton({
    blockType: 'header-two',
    children: (
      <svg fill="#000000" height="24" viewBox="0 0 24 24" width="18" xmlns="http://www.w3.org/2000/svg">
        <path d="M5 4v3h5.5v12h3V7H19V4z"/>
        <path d="M0 0h24v24H0V0z" fill="none"/>
      </svg>),
  });
  
  const linkPlugin = createLinkPlugin({});
  const alignmentPlugin = createAlignmentPlugin();
  const focusPlugin = createFocusPlugin();
  const resizeablePlugin = createResizeablePlugin();
  const decorator = composeDecorators(
    resizeablePlugin.decorator,
    alignmentPlugin.decorator,
    focusPlugin.decorator,
  );

  // FIXME: `decorator` was never getting used in createDividerPlugin, not clear why it's getting passed in
  // @ts-ignore
  const dividerPlugin = createDividerPlugin({decorator});

  const toolbarButtons = [
    { button: BoldButton,                    commentEditor: true   },
    { button: ItalicButton,                  commentEditor: true   },
    { button: UnderlineButton,               commentEditor: true   },
    { button: LinkButton,                    commentEditor: true   },
    { button: Separator,                     commentEditor: true   },
    { button: HeadlineOneButton,             commentEditor: false  },
    { button: HeadlineTwoButton,             commentEditor: true   },
    { button: BlockquoteButton,              commentEditor: true   },
    { button: dividerPlugin.DividerButton,   commentEditor: false  },
    { button: ImageButton,                   commentEditor: false  },
  ]

  const inlineToolbarPlugin = createInlineToolbarPlugin({
    structure: _.chain(toolbarButtons)
                .filter(b => commentEditor ? b.commentEditor : true)
                .pluck('button')
                .value()
  });

  const richButtonsPlugin = createRichButtonsPlugin();
  const blockBreakoutPlugin = createBlockBreakoutPlugin()
  const markdownShortcutsPlugin = createMarkdownShortcutsPlugin();

  const linkifyPlugin = createLinkifyPlugin();

  const imagePlugin = createImagePlugin({ decorator });
  let plugins = [
    inlineToolbarPlugin,
    alignmentPlugin,
    focusPlugin,
    resizeablePlugin,
    imagePlugin,
    linkPlugin,
    richButtonsPlugin,
    blockBreakoutPlugin,
    markdownShortcutsPlugin,
    dividerPlugin,
    linkifyPlugin
  ];

  if (isClient) {
    const mathjaxPlugin = createMathjaxPlugin(
      {
        completion: 'manual',
        mathjaxConfig: {
          jax: ['input/TeX', 'output/CommonHTML'],
          TeX: {
            extensions: ['autoload-all.js', 'Safe.js'],
          },
          messageStyle: 'none',
          showProcessingMessages: false,
          showMathMenu: false,
          showMathMenuMSIE: false,
          preview: 'none',
          delayStartupTypeset: true,
        }
      }
    )
    plugins.push(mathjaxPlugin);
  }

  return plugins;
}

interface DraftJSEditorProps {
  theme?: ThemeType,
  editorState: any,
  onChange: any,
  commentEditor: boolean,
  className: string
}

class DraftJSEditor extends Component<DraftJSEditorProps,{}> {
  plugins: any
  _ref: any
  
  constructor(props: DraftJSEditorProps) {
    super(props);
    this.plugins = initializePlugins(props.commentEditor);
  }

  focus = () => {
    // FIXME: This gets called when you click in the area the text editor has
    // been allocated, but which it hasn't filled, ie, below the text. So it
    // should put the cursor at the end of your partially written post/comment.
    // But instead it restores the cursor to wherever it was when the editor
    // lost focus.
    this._ref && this._ref.focus();
  }

  render() {
    const { theme, editorState, onChange } = this.props

    const InlineToolbar = this.plugins[0].InlineToolbar;
    const AlignmentTool = this.plugins[1].AlignmentTool;

    return (
      <div>
        <DeferRender ssr={false}>
        <div className={this.props.className} onClick={this.focus}>
          <Editor
            editorState={editorState}
            onChange={onChange}
            spellCheck
            plugins={this.plugins}
            keyBindingFn={myKeyBindingFn}
            customStyleMap={styleMap(theme!)}
            blockStyleFn={customBlockStyleFn}
            blockRenderMap={blockRenderMap}
            ref={(ref: AnyBecauseTodo) => { this._ref = ref }}
          />
        </div>
        <InlineToolbar />
        <AlignmentTool />
        </DeferRender>
      </div>
    )
  }
}

const blockRenderMap = Map({
  'spoiler': {
    element: 'div'
  }
});

const DraftJSEditorComponent = registerComponent("DraftJSEditor", DraftJSEditor, {
  hocs: [withTheme()]
});
declare global {
  interface ComponentTypes {
    DraftJSEditor: typeof DraftJSEditorComponent
  }
}

1	import React, { Component } from 'react';	×
2	import { registerComponent } from '../../lib/vulcan-lib';	×
3	import Editor, { composeDecorators } from 'draft-js-plugins-editor';	×
4	import createInlineToolbarPlugin, { Separator } from 'draft-js-inline-toolbar-plugin';	×
5	import createImagePlugin from 'draft-js-image-plugin';	×
6	import createAlignmentPlugin from 'draft-js-alignment-plugin';	×
7	import createFocusPlugin from 'draft-js-focus-plugin';	×
8	import createResizeablePlugin from 'draft-js-resizeable-plugin';	×
9	import createRichButtonsPlugin from 'draft-js-richbuttons-plugin';	×
10	import createBlockBreakoutPlugin from 'draft-js-block-breakout-plugin'	×
11	import createDividerPlugin from './draftjs-plugins/divider';	×
12	import createMathjaxPlugin from './draftjs-plugins/draft-js-mathjax-plugin/src'	×
13	import createMarkdownShortcutsPlugin from './draftjs-plugins/markdown-shortcuts-plugin';	×
14	import { withTheme } from '@material-ui/core/styles';	×
15	import createLinkPlugin from 'draft-js-anchor-plugin';	×
16	import LinkButton from './draftjs-plugins/LinkButton'	×
17	import { myKeyBindingFn } from './draftjs-plugins/keyBindings.js'	×
18	import createLinkifyPlugin from './draftjs-plugins/linkifyPlugin'	×
19	import ImageButton from './draftjs-plugins/image/ImageButton';	×
20	import { Map } from 'immutable';	×
21	import { createBlockStyleButton, ItalicButton, BoldButton, UnderlineButton, BlockquoteButton } from 'draft-js-buttons';	×
22	import { isClient } from '../../lib/executionEnvironment';	×
23	import { styleMap } from "./draftJsEditorStyleMap";	×
24	import * as _ from 'underscore';	×
NEW 25	import DeferRender from '../common/DeferRender.js';	×
26
27	function customBlockStyleFn(contentBlock: AnyBecauseTodo) {
28	const type = contentBlock.getType();	×
29	if (type === 'spoiler') {	×
30	return 'spoiler';	×
31	}
32	}
33
34	const initializePlugins = (commentEditor: AnyBecauseTodo) => {	×
35	const HeadlineOneButton = createBlockStyleButton({	×
36	blockType: 'header-one',
37	children: (
38	<svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
39	<path d="M5 4v3h5.5v12h3V7H19V4z"/>
40	<path d="M0 0h24v24H0V0z" fill="none"/>
41	</svg>),
42	});
43
44	const HeadlineTwoButton = createBlockStyleButton({	×
45	blockType: 'header-two',
46	children: (
47	<svg fill="#000000" height="24" viewBox="0 0 24 24" width="18" xmlns="http://www.w3.org/2000/svg">
48	<path d="M5 4v3h5.5v12h3V7H19V4z"/>
49	<path d="M0 0h24v24H0V0z" fill="none"/>
50	</svg>),
51	});
52
53	const linkPlugin = createLinkPlugin({});	×
54	const alignmentPlugin = createAlignmentPlugin();	×
55	const focusPlugin = createFocusPlugin();	×
56	const resizeablePlugin = createResizeablePlugin();	×
57	const decorator = composeDecorators(	×
58	resizeablePlugin.decorator,
59	alignmentPlugin.decorator,
60	focusPlugin.decorator,
61	);
62
63	// FIXME: `decorator` was never getting used in createDividerPlugin, not clear why it's getting passed in
64	// @ts-ignore
65	const dividerPlugin = createDividerPlugin({decorator});	×
66
67	const toolbarButtons = [	×
68	{ button: BoldButton, commentEditor: true },
69	{ button: ItalicButton, commentEditor: true },
70	{ button: UnderlineButton, commentEditor: true },
71	{ button: LinkButton, commentEditor: true },
72	{ button: Separator, commentEditor: true },
73	{ button: HeadlineOneButton, commentEditor: false },
74	{ button: HeadlineTwoButton, commentEditor: true },
75	{ button: BlockquoteButton, commentEditor: true },
76	{ button: dividerPlugin.DividerButton, commentEditor: false },
77	{ button: ImageButton, commentEditor: false },
78	]
79
80	const inlineToolbarPlugin = createInlineToolbarPlugin({	×
81	structure: _.chain(toolbarButtons)
82	.filter(b => commentEditor ? b.commentEditor : true)	×
83	.pluck('button')
84	.value()
85	});
86
87	const richButtonsPlugin = createRichButtonsPlugin();	×
88	const blockBreakoutPlugin = createBlockBreakoutPlugin()	×
89	const markdownShortcutsPlugin = createMarkdownShortcutsPlugin();	×
90
91	const linkifyPlugin = createLinkifyPlugin();	×
92
93	const imagePlugin = createImagePlugin({ decorator });	×
94	let plugins = [	×
95	inlineToolbarPlugin,
96	alignmentPlugin,
97	focusPlugin,
98	resizeablePlugin,
99	imagePlugin,
100	linkPlugin,
101	richButtonsPlugin,
102	blockBreakoutPlugin,
103	markdownShortcutsPlugin,
104	dividerPlugin,
105	linkifyPlugin
106	];
107
108	if (isClient) {	×
109	const mathjaxPlugin = createMathjaxPlugin(	×
110	{
111	completion: 'manual',
112	mathjaxConfig: {
113	jax: ['input/TeX', 'output/CommonHTML'],
114	TeX: {
115	extensions: ['autoload-all.js', 'Safe.js'],
116	},
117	messageStyle: 'none',
118	showProcessingMessages: false,
119	showMathMenu: false,
120	showMathMenuMSIE: false,
121	preview: 'none',
122	delayStartupTypeset: true,
123	}
124	}
125	)
126	plugins.push(mathjaxPlugin);	×
127	}
128
129	return plugins;	×
130	}
131
132	interface DraftJSEditorProps {
133	theme?: ThemeType,
134	editorState: any,
135	onChange: any,
136	commentEditor: boolean,
137	className: string
138	}
139
140	class DraftJSEditor extends Component<DraftJSEditorProps,{}> {
141	plugins: any
142	_ref: any
143
144	constructor(props: DraftJSEditorProps) {
145	super(props);	×
146	this.plugins = initializePlugins(props.commentEditor);	×
147	}
148
149	focus = () => {	×
150	// FIXME: This gets called when you click in the area the text editor has
151	// been allocated, but which it hasn't filled, ie, below the text. So it
152	// should put the cursor at the end of your partially written post/comment.
153	// But instead it restores the cursor to wherever it was when the editor
154	// lost focus.
155	this._ref && this._ref.focus();	×
156	}
157
158	render() {
159	const { theme, editorState, onChange } = this.props	×
160
161	const InlineToolbar = this.plugins[0].InlineToolbar;	×
162	const AlignmentTool = this.plugins[1].AlignmentTool;	×
163
164	return (	×
165	<div>
166	<DeferRender ssr={false}>
167	<div className={this.props.className} onClick={this.focus}>
168	<Editor
169	editorState={editorState}
170	onChange={onChange}
171	spellCheck
172	plugins={this.plugins}
173	keyBindingFn={myKeyBindingFn}
174	customStyleMap={styleMap(theme!)}
175	blockStyleFn={customBlockStyleFn}
176	blockRenderMap={blockRenderMap}
177	ref={(ref: AnyBecauseTodo) => { this._ref = ref }}	×
178	/>
179	</div>
180	<InlineToolbar />
181	<AlignmentTool />
182	</DeferRender>
183	</div>
184	)
185	}
186	}
187
188	const blockRenderMap = Map({	×
189	'spoiler': {
190	element: 'div'
191	}
192	});
193
194	const DraftJSEditorComponent = registerComponent("DraftJSEditor", DraftJSEditor, {	×
195	hocs: [withTheme()]
196	});
197	declare global {
198	interface ComponentTypes {
199	DraftJSEditor: typeof DraftJSEditorComponent
200	}
201	}

ForumMagnum / ForumMagnum / 10075314064

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous