10965633105

Committed 20 Sep 2024 08:09PM UTC coverage: 31.84% (-0.08%) from 31.915%

Build # 10965633105

Build Type

Pull #9770

github

Committed by

web-flow

Commit Message

Merge 8660bc2d9 into b7bc8cbb3

Pull Request Pull Request #9770: Update ckeditor placeholders in place

Run Details

5076 of 41364 branches covered (12.27%)

Branch coverage included in aggregate %.

10 of 36 new or added lines in 7 files covered. (27.78%)

7 existing lines in 4 files now uncovered.

29431 of 67013 relevant lines covered (43.92%)

184.61 hits per line

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

35.14

/packages/lesswrong/components/editor/CKCommentEditor.tsx

import React, { useState } from 'react'
import { registerComponent } from '../../lib/vulcan-lib/components';
import { ckEditorBundleVersion, getCkCommentEditor } from '../../lib/wrapCkEditor';
import { generateTokenRequest } from '../../lib/ckEditorUtils';
import { ckEditorUploadUrlSetting, ckEditorWebsocketUrlSetting } from '../../lib/publicSettings'
import { ckEditorUploadUrlOverrideSetting, ckEditorWebsocketUrlOverrideSetting, forumTypeSetting } from '../../lib/instanceSettings';
import { defaultEditorPlaceholder } from '../../lib/editor/make_editable';
import { mentionPluginConfiguration } from "../../lib/editor/mentionsConfig";
import { cloudinaryConfig } from '../../lib/editor/cloudinaryConfig'
import CKEditor from '../../lib/vendor/ckeditor5-react/ckeditor';
import type { Editor } from '@ckeditor/ckeditor5-core';
import { useSyncCkEditorPlaceholder } from '../hooks/useSyncCkEditorPlaceholder';

// Uncomment the import and the line below to activate the debugger
// import CKEditorInspector from '@ckeditor/ckeditor5-inspector';

const CKCommentEditor = ({
  data,
  collectionName,
  fieldName,
  onSave,
  onChange,
  onFocus,
  onReady,
  placeholder,
}: {
  data?: any,
  collectionName: CollectionNameString,
  fieldName: string,
  onSave?: any,
  onChange?: any,
  onFocus?: (event: AnyBecauseTodo, editor: AnyBecauseTodo) => void,
  onReady: (editor: Editor) => void,
  placeholder?: string,
}) => {
  const webSocketUrl = ckEditorWebsocketUrlOverrideSetting.get() || ckEditorWebsocketUrlSetting.get();
  const ckEditorCloudConfigured = !!webSocketUrl;
  const CommentEditor = getCkCommentEditor(forumTypeSetting.get());

  const [editorObject, setEditorObject] = useState<Editor | null>(null);

  const actualPlaceholder = placeholder ?? defaultEditorPlaceholder;

  const editorConfig = {
    cloudServices: ckEditorCloudConfigured ? {
      // A tokenUrl token is needed here in order for image upload to work.
      // (It's accessible via drag-and-drop onto the comment box, and is
      // stored on CkEditor's CDN.)
      //
      // The collaborative editor is not activated because no `websocketUrl`
      // or `documentId` is provided.
      tokenUrl: generateTokenRequest(collectionName, fieldName),
      uploadUrl: ckEditorUploadUrlOverrideSetting.get() || ckEditorUploadUrlSetting.get(),
      bundleVersion: ckEditorBundleVersion,
    } : undefined,
    autosave: {
      save (editor: any) {
        return onSave && onSave( editor.getData() )
      }
    },
    initialData: data || "",
    placeholder: actualPlaceholder,
    mention: mentionPluginConfiguration,
    ...cloudinaryConfig,
  };

  useSyncCkEditorPlaceholder(editorObject, actualPlaceholder);

  return <div>
    <CKEditor
      editor={CommentEditor}
      onReady={(editor: Editor) => {
        setEditorObject(editor);
        // Uncomment the line below and the import above to activate the debugger
        // CKEditorInspector.attach(editor)
        onReady(editor)
        return editor
      }}
      onChange={onChange}
      onFocus={onFocus}
      config={editorConfig}
      data={data}
      isCollaborative={false}
    />
  </div>
}

const CKCommentEditorComponent = registerComponent("CKCommentEditor", CKCommentEditor, {
  debugRerenders: true
});
declare global {
  interface ComponentTypes {
    CKCommentEditor: typeof CKCommentEditorComponent
  }
}

1	import React, { useState } from 'react'	1✔
2	import { registerComponent } from '../../lib/vulcan-lib/components';	1✔
3	import { ckEditorBundleVersion, getCkCommentEditor } from '../../lib/wrapCkEditor';	1✔
4	import { generateTokenRequest } from '../../lib/ckEditorUtils';	1✔
5	import { ckEditorUploadUrlSetting, ckEditorWebsocketUrlSetting } from '../../lib/publicSettings'	1✔
6	import { ckEditorUploadUrlOverrideSetting, ckEditorWebsocketUrlOverrideSetting, forumTypeSetting } from '../../lib/instanceSettings';	1✔
7	import { defaultEditorPlaceholder } from '../../lib/editor/make_editable';	1✔
8	import { mentionPluginConfiguration } from "../../lib/editor/mentionsConfig";	1✔
9	import { cloudinaryConfig } from '../../lib/editor/cloudinaryConfig'	1✔
10	import CKEditor from '../../lib/vendor/ckeditor5-react/ckeditor';	1✔
11	import type { Editor } from '@ckeditor/ckeditor5-core';
12	import { useSyncCkEditorPlaceholder } from '../hooks/useSyncCkEditorPlaceholder';	1✔
13
14	// Uncomment the import and the line below to activate the debugger
15	// import CKEditorInspector from '@ckeditor/ckeditor5-inspector';
16
17	const CKCommentEditor = ({	1✔
18	data,
19	collectionName,
20	fieldName,
21	onSave,
22	onChange,
23	onFocus,
24	onReady,
25	placeholder,
26	}: {
27	data?: any,
28	collectionName: CollectionNameString,
29	fieldName: string,
30	onSave?: any,
31	onChange?: any,
32	onFocus?: (event: AnyBecauseTodo, editor: AnyBecauseTodo) => void,
33	onReady: (editor: Editor) => void,
34	placeholder?: string,
35	}) => {
36	const webSocketUrl = ckEditorWebsocketUrlOverrideSetting.get() \|\| ckEditorWebsocketUrlSetting.get();	×
37	const ckEditorCloudConfigured = !!webSocketUrl;	×
38	const CommentEditor = getCkCommentEditor(forumTypeSetting.get());	×
39
NEW 40	const [editorObject, setEditorObject] = useState<Editor \| null>(null);	×
41
NEW 42	const actualPlaceholder = placeholder ?? defaultEditorPlaceholder;	×
43
UNCOV 44	const editorConfig = {	×
45	cloudServices: ckEditorCloudConfigured ? {	×
46	// A tokenUrl token is needed here in order for image upload to work.
47	// (It's accessible via drag-and-drop onto the comment box, and is
48	// stored on CkEditor's CDN.)
49	//
50	// The collaborative editor is not activated because no `websocketUrl`
51	// or `documentId` is provided.
52	tokenUrl: generateTokenRequest(collectionName, fieldName),
53	uploadUrl: ckEditorUploadUrlOverrideSetting.get() \|\| ckEditorUploadUrlSetting.get(),	×
54	bundleVersion: ckEditorBundleVersion,
55	} : undefined,
56	autosave: {
57	save (editor: any) {
58	return onSave && onSave( editor.getData() )	×
59	}
60	},
61	initialData: data \|\| "",	×
62	placeholder: actualPlaceholder,
63	mention: mentionPluginConfiguration,
64	...cloudinaryConfig,
65	};
66
NEW 67	useSyncCkEditorPlaceholder(editorObject, actualPlaceholder);	×
68
UNCOV 69	return <div>	×
70	<CKEditor
71	editor={CommentEditor}
72	onReady={(editor: Editor) => {
NEW 73	setEditorObject(editor);	×
74	// Uncomment the line below and the import above to activate the debugger
75	// CKEditorInspector.attach(editor)
76	onReady(editor)	×
77	return editor	×
78	}}
79	onChange={onChange}
80	onFocus={onFocus}
81	config={editorConfig}
82	data={data}
83	isCollaborative={false}
84	/>
85	</div>
86	}
87
88	const CKCommentEditorComponent = registerComponent("CKCommentEditor", CKCommentEditor, {	1✔
89	debugRerenders: true
90	});
91	declare global {
92	interface ComponentTypes {
93	CKCommentEditor: typeof CKCommentEditorComponent
94	}
95	}

ForumMagnum / ForumMagnum / 10965633105

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