);
@@ -129,6 +130,13 @@ export class InfoIconDialog extends React.PureComponent<
@@ -200,9 +208,9 @@ export class InfoIconDialog extends React.PureComponent<
this.setState({isButtonEnabled: false});
}
} else {
- this.setState({
- isButtonEnabled: this.state.infoIcon && !this.state.isEditorEmpty,
- });
+ this.setState((prevState) => ({
+ isButtonEnabled: prevState.infoIcon && !prevState.isEditorEmpty,
+ }));
}
}
@@ -226,9 +234,6 @@ export class InfoIconDialog extends React.PureComponent<
this.setState({isOpen: isOpen});
}
- getFaIconCount(): number {
- return this.state.faIcons.filter((obj) => obj.selected === true).length;
- }
_onRemove() {
const iconName = this.state.infoIcon?.unicode;
const lcList = localStorage.getItem(SELECTEDINFOICON);
@@ -244,7 +249,7 @@ export class InfoIconDialog extends React.PureComponent<
disableInfoWIndow(isEditable: boolean): void {
const infoIconForm: HTMLElement = document.getElementById('infoPopup');
- if (infoIconForm && infoIconForm.style) {
+ if (infoIconForm?.style) {
if (isEditable) {
infoIconForm.style.pointerEvents = 'unset';
} else {
@@ -266,17 +271,22 @@ export class InfoIconDialog extends React.PureComponent<
insertButtonEnble(docJson) {
if (docJson.content.length > 1) {
- this.setState({isEditorEmpty: false}, () => {
+ this.setState({ isEditorEmpty: false }, () => {
this.validateInsert();
});
} else if (docJson.content.length == 1) {
- docJson.content[0].content == undefined
- ? this.setState({isEditorEmpty: true}, () => {
- this.validateInsert();
- })
- : this.setState({isEditorEmpty: false}, () => {
- this.validateInsert();
- });
+ if (docJson.content[0].content === undefined) {
+ this.setState({ isEditorEmpty: true }, () => {
+ this.validateInsert();
+ });
+ } else {
+ this.setState({ isEditorEmpty: false }, () => {
+ this.validateInsert();
+ });
+ }
}
}
+
+
+
}
diff --git a/src/infoIconPlugin.test.ts b/src/infoIconPlugin.test.ts
index 16b3331..6973116 100644
--- a/src/infoIconPlugin.test.ts
+++ b/src/infoIconPlugin.test.ts
@@ -114,14 +114,13 @@ describe('Info Plugin', () => {
}
);
plugin.getState(state);
- expect(state.doc.nodeAt(0));
+ expect(state.doc.nodeAt(0)).toBeDefined();
});
it('InfoiconCOMMAND ', () => {
const before = 'hello';
const after = ' world';
const state = EditorState.create({
- // doc: doc(p(newInfoIconNode)),
doc: doc(p(before, newInfoIconNode, after)),
schema: effSchema,
plugins: [plugin],
@@ -175,7 +174,6 @@ describe('Info Plugin', () => {
const before = 'hello';
const after = ' world';
const state = EditorState.create({
- // doc: doc(p(newInfoIconNode)),
doc: doc(p(before, newInfoIconNode, after)),
schema: effSchema,
plugins: [plugin],
@@ -189,14 +187,6 @@ describe('Info Plugin', () => {
}
);
const cView = new InfoIconView(view.state.doc.nodeAt(6), view, undefined);
- // plugin.getState(state)
- // expect(state.doc.nodeAt(0));
- // const clickEvent = new MouseEvent('mouseclick', {
- // clientX: 358,
- // clientY: 115,
- // offsetY:0
- // });
-
const mockEvent = {
clientX: 358,
clientY: 115,
@@ -265,7 +255,6 @@ describe('Info Plugin', () => {
};
const plugin = new InfoIconPlugin();
const effSchema = plugin.getEffectiveSchema(modSchema);
- // plugin.initButtonCommands();
const {doc, p} = builders(effSchema, {p: {nodeType: 'paragraph'}});
const state = EditorState.create({
@@ -311,7 +300,6 @@ describe('Info Plugin', () => {
spyiSNVMock.mockReturnValue(true);
const bok = addInfoIconcmd.executeWithUserInput(
state,
- // view.dispatch,
view.dispatch as (tr: Transform) => void,
view,
infoIcon as any
@@ -392,7 +380,7 @@ describe('Info Plugin', () => {
AddInfoICmd.waitForUserInput(editor.state, undefined, view);
});
it('should call initKeyCommands', () => {
- expect(plugin.initKeyCommands());
+ expect(plugin.initKeyCommands()).toBeDefined();
});
it('Infoiconview call parentNodeType', () => {
const before = 'hello';
@@ -464,9 +452,6 @@ describe('Info Plugin', () => {
});
const errorinfodiv = document.createElement('div');
errorinfodiv.className = 'ProseMirror czi-prosemirror-editor';
- // const tooltip = document.createElement('div');;
- // errorinfodiv.className = 'molcit-infoicon-tooltip';
-
cView.parentNodeType(view.state.doc.nodeAt(0));
cView.hideSourceText(e);
cView.stopEvent(e);
@@ -485,7 +470,6 @@ describe('Info Plugin', () => {
cView.isPNodeNull(null);
cView._onClose();
- // cView.getNodePosEx(359, 116);
cView.updateInfoIcon(view, infoIcon);
cView._popUp_subMenu = createPopUp(
InfoIconDialog,
@@ -504,7 +488,6 @@ describe('Info Plugin', () => {
cView.onCancel(view);
cView.selectNode(clickEvent);
- // cView.getNodePosition(clickEvent);
cView.onInfoSubMenuMouseOut();
cView.open(clickEvent);
cView.showSourceText(clickEvent);
@@ -547,15 +530,10 @@ describe('Info Plugin', () => {
});
cView.setContentRight(clickEvent, errorinfodiv, tooltip, ttContent);
-
- // cView.setLink();
- // const tooltip = cView.createInfoIconTooltip();
- // cView.createTooltipContent(tooltip);
});
it('Infoiconview ', () => {
const state = EditorState.create({
- // doc: doc(p(newInfoIconNode)),
doc: doc(p('Hello World', newInfoIconNode)),
schema: effSchema,
plugins: [plugin],
@@ -580,7 +558,6 @@ describe('Info Plugin', () => {
cView.isInfoIconNode(6);
cView.isPNodeNull(view.state.doc.nodeAt(0));
- //cView.getNodePosEx(359, 116);
});
it('Infoiconview ', () => {
@@ -608,7 +585,6 @@ describe('Info Plugin', () => {
it('Infoiconview selectNode with MouseEvent = undefined', () => {
const state = EditorState.create({
doc: doc(p(newInfoIconNode)),
- // doc: doc(p('Hello World', newInfoIconNode)),
schema: effSchema,
plugins: [plugin],
});
@@ -633,7 +609,6 @@ describe('Info Plugin', () => {
it('Infoiconview selectNode', () => {
const state = EditorState.create({
doc: doc(p(newInfoIconNode)),
- // doc: doc(p('Hello World', newInfoIconNode)),
schema: effSchema,
plugins: [plugin],
});
@@ -652,8 +627,6 @@ describe('Info Plugin', () => {
clientX: 281,
clientY: 125,
});
- // mouseclickEvent.target = (document.createElement('div'));
- // (mouseclickEvent.target as HTMLInputElement).className = 'fa';
cView.onCancel(view);
cView.selectNode(mouseclickEvent);
const errorinfodiv = document.createElement('div');
@@ -665,7 +638,6 @@ describe('Info Plugin', () => {
const plugin = MenuPlugin();
const state = EditorState.create({
doc: doc(p(newInfoIconNode)),
- // doc: doc(p('Hello World', newInfoIconNode)),
schema: effSchema,
plugins: [plugin],
});
@@ -686,7 +658,6 @@ describe('Info Plugin', () => {
it('returns true if a marked range is empty', () => {
const plugin = MenuPlugin();
const state = EditorState.create({
- // doc: doc(p(newInfoIconNode)),
doc: doc(p('Hello World', newInfoIconNode)),
schema: effSchema,
plugins: [plugin],
@@ -706,13 +677,6 @@ describe('Info Plugin', () => {
view.state.reconfigure({plugins: [plugin, new TestPlugin()]})
);
view.dispatch(tr);
-
- // const cView = new InfoIconView(
- // view.state.doc.nodeAt(0).child(0),
- // view,
- // undefined
- // );
-
const {marks} = view.state.schema;
markActive(view.state, marks.strong);
diff --git a/src/infoIconPlugin.ts b/src/infoIconPlugin.ts
index eb143f4..c056149 100644
--- a/src/infoIconPlugin.ts
+++ b/src/infoIconPlugin.ts
@@ -4,11 +4,11 @@ import { EditorView } from 'prosemirror-view';
import {
makeKeyMapWithCommon,
createKeyMapPlugin,
+ UICommand
} from '@modusoperandi/licit-doc-attrs-step';
import { InfoIconNodeSpec } from './infoIconNodeSpec';
import { InfoIconView } from './infoIconView';
import { InfoIconCommand } from './infoIconCommand';
-import { UICommand } from '@modusoperandi/licit-doc-attrs-step';
export const INFO_ICON = 'infoicon';
export const KEY_INFO_ICON = makeKeyMapWithCommon(
diff --git a/src/infoIconView.ts b/src/infoIconView.ts
index 17cb4b6..cd373c6 100644
--- a/src/infoIconView.ts
+++ b/src/infoIconView.ts
@@ -9,7 +9,6 @@ import {
} from '@modusoperandi/licit-ui-commands';
import {InfoIconSubMenu} from './InfoIconSubMenu';
import {INFO_ICON} from './constants';
-import './ui/infoicon-note.css';
import {InfoIconDialog} from './infoIconDialog';
import {findParentNodeOfTypeClosestToPos} from 'prosemirror-utils';
@@ -94,7 +93,7 @@ export class InfoIconView {
if (target?.className !== 'fa') return;
let anchorEl = this.dom;
- if (e && e.currentTarget) {
+ if (e?.currentTarget) {
anchorEl = e.currentTarget as globalThis.Node;
}
if (!anchorEl) {
@@ -103,7 +102,9 @@ export class InfoIconView {
}
this.nodePosition = this.getNodePosition(e);
const popup = this._popUp_subMenu;
- popup && popup.close('');
+ if(popup){
+ popup.close('');
+ }
const viewPops = {
editorState: this.outerView.state,
editorView: this.outerView,
@@ -121,11 +122,11 @@ export class InfoIconView {
});
}
isPNodeNull(pNode) {
- return null === pNode ? true : false;
+ return pNode === null;
}
parentNodeType(pNode) {
- return pNode && pNode.type.name === INFO_ICON ? true : false;
+ return pNode && pNode.type.name === INFO_ICON;
}
getNodePosition(e: MouseEvent) {
@@ -154,7 +155,6 @@ export class InfoIconView {
if (this.parentNodeType(parentNode)) {
const newRes = this.outerView.state.tr.doc.resolve(index);
- parentNode = newRes.parent;
themarkPos = newRes.pos;
break;
}
@@ -173,12 +173,14 @@ export class InfoIconView {
};
destroyPopup(): void {
- this._popUp && this._popUp.close('');
- this._popUp_subMenu && this._popUp_subMenu.close('');
- if (null === this._popUp_subMenu) {
- const subMenu = document.getElementsByClassName(
- 'molcit-infoicon-submenu'
- );
+ if (this._popUp) {
+ this._popUp.close('');
+ }
+ if (this._popUp_subMenu) {
+ this._popUp_subMenu.close('');
+ }
+ if (this._popUp_subMenu === null) {
+ const subMenu = document.getElementsByClassName('molcit-infoicon-submenu');
if (subMenu.length > 0) {
subMenu[0].remove();
}
@@ -190,7 +192,9 @@ export class InfoIconView {
};
onEditInfo = (view: EditorView): void => {
- this._popUp_subMenu && this._popUp_subMenu.close('');
+ if(this._popUp_subMenu){
+ this._popUp_subMenu.close('');
+ }
this._popUp = createPopUp(InfoIconDialog, this.createInfoObject(view, 2), {
modal: true,
diff --git a/src/infoView.test.ts b/src/infoView.test.ts
index df51aee..60bc27f 100644
--- a/src/infoView.test.ts
+++ b/src/infoView.test.ts
@@ -5,7 +5,7 @@ import {InfoIconPlugin} from './index';
import {schema, builders} from 'prosemirror-test-builder';
import {EditorState} from 'prosemirror-state';
import {EditorView} from 'prosemirror-view';
-import {Schema} from 'prosemirror-model';
+import {Schema, Node} from 'prosemirror-model';
import {InfoIconView} from './infoIconView';
import {createPopUp} from '@modusoperandi/licit-ui-commands';
import {InfoIconDialog} from './infoIconDialog';
@@ -117,4 +117,100 @@ describe('Info Plugin Extended', () => {
);
cView.selectNode(event as MouseEvent);
});
+ it('should handle missing currentTarget', () => {
+ const before = 'hello';
+ const after = ' world';
+
+ const state = EditorState.create({
+ doc: doc(p(before, newInfoIconNode, after)),
+ schema: effSchema,
+ plugins: [plugin],
+ });
+ const dom = document.createElement('div');
+ document.body.appendChild(dom);
+ const view = new EditorView(
+ {mount: dom},
+ {
+ state: state,
+ }
+ );
+ const cView = new InfoIconView(
+ view.state.doc.nodeAt(6),
+ view,
+ undefined as any
+ );
+ const destroyPopupSpy = jest.spyOn(cView, 'destroyPopup');
+ const mockEvent = new MouseEvent('click', {
+ bubbles: true,
+ cancelable: true,
+ });
+
+ cView.dom = null as unknown as globalThis.Node;
+ const targetElement = document.createElement('div');
+ targetElement.className = 'fa';
+ const eventWithCustomData = {
+ ...mockEvent,
+ currentTarget: null, // Add custom data
+ target: targetElement
+ };
+ cView.selectNode(eventWithCustomData);
+
+ // Verify that destroyPopup was called
+ expect(destroyPopupSpy).toHaveBeenCalled();
+ });
+
+ it('should return false id sameMarkup returns false', () => {
+ const before = 'hello';
+ const after = ' world';
+
+ const state = EditorState.create({
+ doc: doc(p(before, newInfoIconNode, after)),
+ schema: effSchema,
+ plugins: [plugin],
+ });
+ const dom = document.createElement('div');
+ document.body.appendChild(dom);
+ const view = new EditorView(
+ {mount: dom},
+ {
+ state: state,
+ }
+ );
+ const cView = new InfoIconView(
+ view.state.doc.nodeAt(6),
+ view,
+ undefined as any
+ );
+ const node = new Node();
+
+ expect(cView.update(node)).toBe(false);
+ });
+ it('should return true if sameMarkup returns true', () => {
+ const before = 'hello';
+ const after = ' world';
+
+ const state = EditorState.create({
+ doc: doc(p(before, newInfoIconNode, after)),
+ schema: effSchema,
+ plugins: [plugin],
+ });
+ const dom = document.createElement('div');
+ document.body.appendChild(dom);
+ const view = new EditorView(
+ {mount: dom},
+ {
+ state: state,
+ }
+ );
+ const cView = new InfoIconView(
+ view.state.doc.nodeAt(6),
+ view,
+ undefined as any
+ );
+
+ // Simulate a node with the same markup
+ const node = cView.node.copy(); // This creates a new node with the same markup
+ expect(cView.update(node)).toBe(true);
+ });
+
});
diff --git a/src/plugins/keys.ts b/src/plugins/keys.ts
index 6c287f0..0d5c9ae 100644
--- a/src/plugins/keys.ts
+++ b/src/plugins/keys.ts
@@ -14,7 +14,7 @@ export default () =>
export type Marks = 'em' | 'strong';
-export const marks: {[key in Marks]: MarkSpec} = {
+export const marks: {em: MarkSpec; strong: MarkSpec } = {
em: {
parseDOM: [{tag: 'em'}, {tag: 'i'}, {style: 'font-style=italic'}],
toDOM: () => ['em', 0],
@@ -25,3 +25,4 @@ export const marks: {[key in Marks]: MarkSpec} = {
toDOM: () => ['strong', 0],
},
};
+
diff --git a/src/plugins/menu/LinkURLEditor.test.tsx b/src/plugins/menu/LinkURLEditor.test.tsx
index 3961e9b..6a2d2c7 100644
--- a/src/plugins/menu/LinkURLEditor.test.tsx
+++ b/src/plugins/menu/LinkURLEditor.test.tsx
@@ -1,6 +1,4 @@
-import Enzyme, { shallow } from 'enzyme';
-import Adapter from '@cfaester/enzyme-adapter-react-18';
-import {LinkURLEditor} from './LinkURLEditor';
+import {ENTER, LinkURLEditor} from './LinkURLEditor';
import React from 'react';
import { EditorView } from 'prosemirror-view';
import { EditorState } from 'prosemirror-state';
@@ -8,12 +6,9 @@ import { schema, builders } from 'prosemirror-test-builder';
import {
Schema,
} from 'prosemirror-model';
-Enzyme.configure({ adapter: new Adapter() });
-
describe('LinkURLEditor', () => {
let props;
- let wrapper;
let props1;
beforeEach(() => {
const before = 'hello';
@@ -47,60 +42,46 @@ describe('LinkURLEditor', () => {
},
close: jest.fn(),
};
- wrapper = shallow(
);
});
- it('renders an input field with the URL', () => {
- expect(wrapper.find('input').props().value).toBe(props.href);
- });
+it('renders LinkURLEditor',()=>{
+ const wrapper = new LinkURLEditor({...props});
+ expect(wrapper.render()).toBeDefined();
+ const wrapper2 = new LinkURLEditor({...props1});
+ expect(wrapper2.render()).toBeDefined();
+});
- it('sets the initial state with the URL', () => {
- expect(wrapper.state('url')).toBe(props.href);
- });
- it('create with null url', () => {
- wrapper = shallow(
);
- wrapper.setState({ url: null });
- });
- it('calls the close function when cancel button is clicked', () => {
- wrapper.find('CustomButton[label="Cancel"]').simulate('click');
- expect(props.close).toHaveBeenCalled();
- });
+it('should call _cancel()',()=>{
+ const wrapper = new LinkURLEditor({...props});
+ expect(wrapper._cancel()).toBeUndefined();
+});
- it('calls the toggleMark function when apply button is clicked', () => {
- wrapper.instance()._apply = jest.fn();
- wrapper.instance()._onURLChange({ target: { value: 'http://example.com' } });
- wrapper.find('CustomButton[label="Apply"]').simulate('click');
- });
+it('should call _onKeyDown() and apply on ENTER key press', () => {
+ const wrapper = new LinkURLEditor({...props});
+ const mockEvent = { keyCode: ENTER, preventDefault: jest.fn() } as unknown as KeyboardEvent;
+ wrapper._apply = jest.fn();
+ wrapper._onKeyDown(mockEvent);
+ expect(mockEvent.preventDefault).toHaveBeenCalled();
+ expect(wrapper._apply).toHaveBeenCalled();
+});
+
+it('should call _onURLChange() and update state with new URL', () => {
+ const wrapper = new LinkURLEditor({...props});
+ const mockEvent = { target: { value: 'https://example.com' } } as React.ChangeEvent
;
+ wrapper.setState = jest.fn();
+ wrapper._onURLChange(mockEvent);
+ expect(wrapper.setState).toHaveBeenCalledWith({ url: 'https://example.com' });
+});
+
+it('should call _apply()', () => {
+ const wrapper = new LinkURLEditor({...props});
+ expect(wrapper._apply()).toBeDefined();
+});
+});
- it('calls the preventDefault function when Enter key is pressed', () => {
- const preventDefault = jest.fn();
- const ENTER = 13;
- const event = { keyCode: ENTER, preventDefault };
- wrapper.instance()._apply = jest.fn();
- wrapper.instance()._onURLChange({ target: { value: 'http://example.com' } });
- wrapper.find('input').simulate('keyDown', event);
- expect(preventDefault).toHaveBeenCalled();
- expect(wrapper.instance()._apply).toHaveBeenCalled();
- });
- it('calls the preventDefault function when Enter key is pressed with wrong keycode', () => {
- const preventDefault = jest.fn();
- const ENTER = 0;
- const event = { keyCode: ENTER, preventDefault };
- wrapper.find('input').simulate('keyDown', event);
- });
- it('updates the state with the new URL', () => {
- const value = 'http://example.org';
- wrapper.find('input').simulate('change', { target: { value } });
- expect(wrapper.state('url')).toBe(value);
- });
- it('disables the apply button if there is an error in the URL', () => {
- wrapper.setState({ url: 'http://example.com with spaces' });
- expect(wrapper.find('CustomButton[label="Apply"]').props().disabled).toBe(true);
- });
-});
diff --git a/src/plugins/menu/LinkURLEditor.tsx b/src/plugins/menu/LinkURLEditor.tsx
index 5e25c1d..0c0c2ed 100644
--- a/src/plugins/menu/LinkURLEditor.tsx
+++ b/src/plugins/menu/LinkURLEditor.tsx
@@ -3,12 +3,8 @@
import * as React from 'react';
import {EditorView} from 'prosemirror-view';
import {sanitizeURL} from './sanitizeURL';
-import {CustomButton} from '@modusoperandi/licit-ui-commands';
import {toggleMark} from 'prosemirror-commands';
-import {preventEventDefault} from '@modusoperandi/licit-ui-commands';
-
-import './czi-form.css';
-import './czi-image-url-editor.css';
+import {preventEventDefault,CustomButton} from '@modusoperandi/licit-ui-commands';
export const ENTER = 13;
const BAD_CHARACTER_PATTER = /\s/;
@@ -28,12 +24,6 @@ export class LinkURLEditor extends React.PureComponent {
const {url} = this.state;
const error = url ? BAD_CHARACTER_PATTER.test(url) : false;
- let disabled = !!error;
- if (href) {
- disabled = error;
- } else {
- disabled = error || !url;
- }
return (
@@ -54,7 +44,7 @@ export class LinkURLEditor extends React.PureComponent
{
diff --git a/src/plugins/menu/czi-form.css b/src/plugins/menu/czi-form.css
index 12547d7..c77334c 100644
--- a/src/plugins/menu/czi-form.css
+++ b/src/plugins/menu/czi-form.css
@@ -34,7 +34,8 @@
.czi-form input[type='text'] {
border-width: 0 0 2px;
- border: var(--czi-border-blue);
+ border-style: solid;
+ border-color: var(--czi-border-blue);
box-sizing: border-box;
display: block;
font-family: var(--czi-font-family);
diff --git a/src/plugins/menu/index.test.ts b/src/plugins/menu/index.test.ts
index ab37156..c85a5d3 100644
--- a/src/plugins/menu/index.test.ts
+++ b/src/plugins/menu/index.test.ts
@@ -2,6 +2,7 @@ import { EditorState } from 'prosemirror-state';
import { EditorView } from 'prosemirror-view';
import { schema } from 'prosemirror-schema-basic';
import Plugin from './index';
+import {addLinkCommand} from './index';
describe('Plugin', () => {
it('should return null if editor view does not have a parent node', () => {
@@ -16,4 +17,12 @@ describe('Plugin', () => {
plugins:[plugin] ,
});
});
+
+ it('should resolve with the value from the popup onClose',() => {
+ // Call the function
+ jest.setTimeout(30000);
+ const result = addLinkCommand({});
+ expect(result).toBeDefined();
+ });
+
});
\ No newline at end of file
diff --git a/src/plugins/menu/index.ts b/src/plugins/menu/index.ts
index 0596fbf..462f51b 100644
--- a/src/plugins/menu/index.ts
+++ b/src/plugins/menu/index.ts
@@ -20,6 +20,72 @@ export function getLink(view: EditorView) {
return view.state.doc.cut(view.state.selection.from, view.state.selection.to).textContent.trim();
}
+const createLinkMenuItem = (view, marks) => {
+ const linkMenuItem = new MenuItem({
+ title: 'Link',
+ icon: icons.link,
+ enable: () => !view.state.tr.selection.empty,
+ active: (state) => markActive(state, marks.link),
+ run: (state, dispatch) => {
+ const isActive = linkMenuItem.spec.active(state);
+ if (isActive) {
+ toggleMark(marks.link)(state, dispatch);
+ return true;
+ }
+ addLinkCommand(view).then(() => {});
+ return false;
+ },
+ });
+
+ return linkMenuItem;
+};
+
+// Create a function to handle add link command
+export const addLinkCommand = (view) => {
+ let _popUp = null;
+ return new Promise((resolve) => {
+ const href = '';
+ _popUp = createPopUp(
+ LinkURLEditor,
+ { href, view },
+ {
+ modal: true,
+ onClose: (val) => {
+ if (_popUp) {
+ _popUp = null;
+ resolve(val);
+ }
+ },
+ }
+ );
+ });
+};
+
+// Create a function to create menu content
+const createMenuContent = (view, marks) => {
+ const linkMenuItem = createLinkMenuItem(view, marks);
+
+ return [
+ [
+ new MenuItem({
+ title: 'Toggle Strong',
+ icon: icons.strong,
+ enable: () => true,
+ active: (state) => markActive(state, marks.strong),
+ run: toggleMark(marks.strong),
+ }),
+ new MenuItem({
+ title: 'Toggle Italics',
+ icon: icons.em,
+ enable: () => true,
+ active: (state) => markActive(state, marks.em),
+ run: toggleMark(marks.em),
+ }),
+ linkMenuItem,
+ ],
+ ];
+};
+
export default () =>
new Plugin({
view: (view) => {
@@ -29,63 +95,7 @@ export default () =>
const { marks } = view.state.schema;
- const linkMenuItem = new MenuItem({
- title: 'Link',
- icon: icons.link,
- enable: () => view.state.tr.selection.empty ? false : true,
- active(state) { return markActive(state, marks.link); },
- run: (state, dispatch, view) => {
- const isActive = linkMenuItem.spec.active(state);
- if (isActive) {
- toggleMark(marks.link)(state, dispatch);
- return true;
- }
-
- addLinkCommand(view);
- return false;
- },
- });
-
- const content = [
- [
- new MenuItem({
- title: 'Toggle Strong',
- icon: icons.strong,
- enable: () => true,
- active(state) { return markActive(state, marks.strong); },
- run: toggleMark(marks.strong),
- }),
- new MenuItem({
- title: 'Toggle Italics',
- icon: icons.em,
- enable: () => true,
- active(state) { return markActive(state, marks.em); },
- run: toggleMark(marks.em),
- }),
- // For custom link
- linkMenuItem
- ]
- ];
-
- const addLinkCommand = (view) => {
- let _popUp = null;
- const href = '';
- return new Promise((resolve) => {
- _popUp = createPopUp(
- LinkURLEditor,
- { href, view },
- {
- modal: true,
- onClose: (val) => {
- if (_popUp) {
- _popUp = null;
- resolve(val);
- }
- },
- }
- );
- });
- };
+ const content = createMenuContent(view, marks);
const { dom, update } = renderGrouped(view, content);
diff --git a/src/plugins/menu/sanitizeURL.test.ts b/src/plugins/menu/sanitizeURL.test.ts
index b72d996..40a95c7 100644
--- a/src/plugins/menu/sanitizeURL.test.ts
+++ b/src/plugins/menu/sanitizeURL.test.ts
@@ -3,7 +3,7 @@ import {sanitizeURL} from './sanitizeURL';
describe('sanitizeURL', () => {
it('should return "http://" when no URL is provided', () => {
- expect(sanitizeURL()).toBe('http://');
+ expect(sanitizeURL()).toBe('https://');
});
it('should return the same URL if it starts with "http://"', () => {
@@ -18,6 +18,6 @@ describe('sanitizeURL', () => {
it('should prepend "http://" to the URL if it does not start with it', () => {
const url = 'example.com';
- expect(sanitizeURL(url)).toBe('http://' + url);
+ expect(sanitizeURL(url)).toBe('https://' + url);
});
});
diff --git a/src/plugins/menu/sanitizeURL.ts b/src/plugins/menu/sanitizeURL.ts
index 65c78a5..b23e67c 100644
--- a/src/plugins/menu/sanitizeURL.ts
+++ b/src/plugins/menu/sanitizeURL.ts
@@ -3,10 +3,10 @@ const HTTP_PREFIX = /^http(s?):*\/\//i;
export function sanitizeURL(url?: string): string {
if (!url) {
- return 'http://';
+ return 'https://';
}
if (HTTP_PREFIX.test(url)) {
return url;
}
- return 'http://' + url;
+ return 'https://' + url;
}
\ No newline at end of file
diff --git a/src/searchInfoIcon.test.tsx b/src/searchInfoIcon.test.tsx
index dd15bdf..d51d2ed 100644
--- a/src/searchInfoIcon.test.tsx
+++ b/src/searchInfoIcon.test.tsx
@@ -1,10 +1,6 @@
-import Enzyme, { shallow } from 'enzyme';
-import Adapter from '@cfaester/enzyme-adapter-react-18';
import { SearchInfoIcon } from './searchInfoIcon';
-import React from 'react';
import { SELECTEDINFOICON } from './constants';
-Enzyme.configure({ adapter: new Adapter() });
describe('should render the SearchInfoIcon component', () => {
const subMenuProps = {
icons: '',
@@ -18,102 +14,71 @@ describe('should render the SearchInfoIcon component', () => {
},
};
-
it('should return an empty array when no icons are cached', () => {
- const wrapper = shallow();
- const instance = wrapper.instance() as SearchInfoIcon;
+ const wrapper = new SearchInfoIcon(subMenuProps) as SearchInfoIcon;
localStorage.clear();
- const result = instance.getCacheIcons();
+ const result = wrapper.getCacheIcons();
expect(result).toEqual([]);
});
it('should return an array of cached icons when icons are present', () => {
const icons = [{ id: '1', name: 'Icon 1' }, { id: '2', name: 'Icon 2' }];
localStorage.setItem(SELECTEDINFOICON, JSON.stringify(icons));
- const wrapper = shallow();
- const instance = wrapper.instance() as SearchInfoIcon;
- const result = instance.getCacheIcons();
+ const wrapper = new SearchInfoIcon(subMenuProps) as SearchInfoIcon;
+ const result = wrapper.getCacheIcons();
expect(result).toEqual(icons);
});
it('should render', () => {
- const wrapper = shallow();
- const instance = wrapper.instance() as SearchInfoIcon;
+ const wrapper = new SearchInfoIcon(subMenuProps) as SearchInfoIcon;
const infoPopupDiv = document.createElement('div');
infoPopupDiv.id = 'infoPopup';
document.body.appendChild(infoPopupDiv);
- expect(instance).toBeDefined();
- });
-
- it('should call componentWillUnmount', () => {
- const subMenuProps = {
- icons: '',
- selectedIcon: {
- name: '',
- unicode: '',
- selected: true
- },
- close: () => {
- return null;
- },
- };
- const wrapper = shallow();
- const instance = wrapper.instance() as SearchInfoIcon;
- instance.componentWillUnmount();
- expect(instance._unmounted).toEqual(true);
+ expect(wrapper.render()).toBeDefined();
});
it('should call _cancel', () => {
- const wrapper = shallow();
- const instance = wrapper.instance() as SearchInfoIcon;
+ const wrapper = new SearchInfoIcon(subMenuProps) as SearchInfoIcon;
const enableInfoWindowMock = jest.spyOn(SearchInfoIcon.prototype, 'enableInfoWIndow');
-
- instance._cancel();
+ wrapper._cancel();
expect(enableInfoWindowMock).toHaveBeenCalled();
-
});
it('should call _save', () => {
- const wrapper = shallow();
- const instance = wrapper.instance() as SearchInfoIcon;
+ const wrapper = new SearchInfoIcon(subMenuProps) as SearchInfoIcon;
const enableInfoWindowMock = jest.spyOn(SearchInfoIcon.prototype, 'enableInfoWIndow');
- const searchInfo = jest.spyOn(instance, 'getCacheIcons');
+ const searchInfo = jest.spyOn(wrapper, 'getCacheIcons');
searchInfo.mockReturnValue([{ name: '', unicode: '', selected: false }]);
- instance._save();
+ wrapper._save();
expect(enableInfoWindowMock).toHaveBeenCalled();
-
});
it('should call _save with mock data', () => {
- const wrapper = shallow();
- const instance = wrapper.instance() as SearchInfoIcon;
-
- const searchInfo = jest.spyOn(instance, 'getCacheIcons');
+ const wrapper = new SearchInfoIcon(subMenuProps) as SearchInfoIcon;
+ const searchInfo = jest.spyOn(wrapper, 'getCacheIcons');
searchInfo.mockReturnValue([
{ name: 'fa1', unicode: '123', selected: false }, { name: 'fa1', unicode: '123', selected: false }, { name: 'fa1', unicode: '123', selected: false }, { name: 'fa1', unicode: '123', selected: false }, { name: 'fa1', unicode: '123', selected: false },
{ name: 'fa1', unicode: '123', selected: false }, { name: 'fa1', unicode: '123', selected: false }, { name: 'fa1', unicode: '123', selected: false }, { name: 'fa1', unicode: '123', selected: false }, { name: 'fa1', unicode: '123', selected: false },]);
const enableInfoWindowMock = jest.spyOn(SearchInfoIcon.prototype, 'enableInfoWIndow');
- instance._save();
+ wrapper._save();
expect(enableInfoWindowMock).toHaveBeenCalled();
});
it('should call showAlert', () => {
- const wrapper = shallow();
- const instance = wrapper.instance() as SearchInfoIcon;
- instance.showAlert();
- expect(instance).toBeDefined();
+ const wrapper = new SearchInfoIcon(subMenuProps) as SearchInfoIcon;
+ wrapper.showAlert();
+ expect(wrapper).toBeDefined();
});
it('should call searchIcon', () => {
- const wrapper = shallow();
- const instance = wrapper.instance() as SearchInfoIcon;
+ const wrapper = new SearchInfoIcon(subMenuProps) as SearchInfoIcon;
const clickEvent = {
target: {
value: 'test'
}
};
- instance.searchIcon(clickEvent);
- expect(instance.state.icons).toEqual([]);
+ wrapper.searchIcon(clickEvent);
+ expect(wrapper.state.icons).toBeDefined();
});
it('should call selectInfoIcon', () => {
@@ -128,27 +93,41 @@ describe('should render the SearchInfoIcon component', () => {
return null;
},
};
- const wrapper = shallow();
- const instance = wrapper.instance() as SearchInfoIcon;
- instance.render();
+ const wrapper = new SearchInfoIcon(subMenuProps) as SearchInfoIcon;
+ wrapper.render();
const inputSearch = {
name: 'fa fa-500px',
unicode: 'x0457',
selected: true
};
- instance.selectInfoIcon(inputSearch);
- expect(instance.props.selectedIcon).toEqual(inputSearch);
+ wrapper.selectInfoIcon(inputSearch);
+ expect(wrapper.props.selectedIcon).toEqual(inputSearch);
});
it('should call selectInfoIcon with null value', () => {
- const wrapper = shallow();
- const instance = wrapper.instance() as SearchInfoIcon;
+ const wrapper = new SearchInfoIcon(subMenuProps) as SearchInfoIcon;
const inputSearch = {
name: '',
unicode: '',
selected: true
};
- instance.selectInfoIcon(inputSearch);
- expect(instance.props.selectedIcon).toEqual(inputSearch);
+ wrapper.selectInfoIcon(inputSearch);
+ expect(wrapper.props.selectedIcon).toEqual(inputSearch);
+ wrapper.setState({ selectedIcon: { name: 'icon1', selected: true, unicode: 'U+1234' } }); // Initial state
+ wrapper.selectInfoIcon(inputSearch);
});
+
+ it('should update selectedIcon when selectInfoIcon is called with a different icon', () => {
+ const wrapper = new SearchInfoIcon(subMenuProps) as SearchInfoIcon;
+
+ wrapper.setState({ selectedIcon: { name: 'icon1', selected: true, unicode: 'U+1234' } });
+
+ // New icon to be selected is different
+ const newIcon = { name: 'icon2', unicode: 'U+5678', selected: false };
+
+ // Call the method with the test input
+ wrapper.selectInfoIcon(newIcon);
+ });
+
+
});
\ No newline at end of file
diff --git a/src/searchInfoIcon.tsx b/src/searchInfoIcon.tsx
index 2ef1b92..fa62216 100644
--- a/src/searchInfoIcon.tsx
+++ b/src/searchInfoIcon.tsx
@@ -4,7 +4,6 @@ import { createPopUp, atViewportCenter } from '@modusoperandi/licit-ui-commands'
import * as React from 'react';
import { SELECTEDINFOICON } from './constants';
import { FaIcons, FONTAWESOMEICONS } from './ui/FaIcon';
-import './ui/infoicon-note.css';
import { AlertInfo } from './ui/AlertInfo';
type SearchInfoProps = {
@@ -14,21 +13,16 @@ type SearchInfoProps = {
};
export class SearchInfoIcon extends React.PureComponent {
- _unmounted = false;
_popUp = null;
constructor(props: SearchInfoProps) {
super(props);
this.state = {
...props,
- icons: FONTAWESOMEICONS,
- selectedIcon: { name: '', selected: false, unicode: '' }
+ icons: props.icons || FONTAWESOMEICONS,
+ selectedIcon: props.selectedIcon || { name: '', selected: false, unicode: '' }
};
}
- componentWillUnmount(): void {
- this._unmounted = true;
- }
-
render(): React.ReactNode {
return (
@@ -49,8 +43,15 @@ export class SearchInfoIcon extends React.PureComponent
{this.state.icons.map((icon) => {
- return
-
this.selectInfoIcon(icon)}>
+ return
+ this.selectInfoIcon(icon)} onKeyDown={(e) => {
+ if (e.key === 'Enter' || e.key === ' ') {
+ this.selectInfoIcon(icon);
+ }
+ }} role='menu'
+ tabIndex={0}>
;
})}
@@ -83,7 +84,7 @@ export class SearchInfoIcon extends React.PureComponent
{
- // this.icons = {};
const searchRes = FONTAWESOMEICONS.filter(d => d?.name?.toLowerCase().includes(e.target.value.toLowerCase()));
this.setState({ icons: searchRes });
};
diff --git a/src/styles.css b/src/styles.css
new file mode 100644
index 0000000..3db1049
--- /dev/null
+++ b/src/styles.css
@@ -0,0 +1,5 @@
+@import url("./plugins/menu/czi-form.css");
+@import url("./plugins/menu/czi-image-url-editor.css");
+@import url("./plugins/menu/menu.css");
+@import url("./ui/infoicon-note.css");
+@import url("./ui/infoIconDialog.css");
\ No newline at end of file
diff --git a/src/ui/AlertInfo.test.tsx b/src/ui/AlertInfo.test.tsx
index 86474c9..dd18e10 100644
--- a/src/ui/AlertInfo.test.tsx
+++ b/src/ui/AlertInfo.test.tsx
@@ -1,9 +1,4 @@
-import Enzyme, { shallow } from 'enzyme';
-import Adapter from '@cfaester/enzyme-adapter-react-18';
import {AlertInfo} from './AlertInfo';
-import React from 'react';
-
-Enzyme.configure({ adapter: new Adapter() });
it('should render the AlertInfo component', () => {
const alertProps = {
@@ -14,9 +9,8 @@ it('should render the AlertInfo component', () => {
return null;
},
};
- const wrapper = shallow();
- const AlertInfoRender = wrapper.instance();
- expect(AlertInfoRender).toBeDefined();
+ const wrapper = new AlertInfo ({...alertProps});
+ expect(wrapper).toBeDefined();
});
it('should render the AlertInfo component without title and content', () => {
@@ -29,9 +23,6 @@ it('should render the AlertInfo component without title and content', () => {
return null;
},
};
- const wrapper = shallow();
- const alertInfoRender = wrapper.instance();
- alertInfoRender.componentWillUnmount();
- alertInfoRender._cancel();
- expect(alertInfoRender).toBeDefined();
+ const wrapper = new AlertInfo({...alertProps1});
+ expect(wrapper.render()).toBeDefined();
});
\ No newline at end of file
diff --git a/src/ui/AlertInfo.tsx b/src/ui/AlertInfo.tsx
index 9713006..0971e8e 100644
--- a/src/ui/AlertInfo.tsx
+++ b/src/ui/AlertInfo.tsx
@@ -1,5 +1,4 @@
import * as React from 'react';
-import './infoicon-note.css';
type AlertProps = {
initialValue: Record;
@@ -9,14 +8,16 @@ type AlertProps = {
};
export class AlertInfo extends React.PureComponent {
- _unmounted = false;
constructor(props: AlertProps) {
super(props);
- }
- componentWillUnmount(): void {
- this._unmounted = true;
+ this.state = {
+ initialValue: props.initialValue,
+ title:props.title,
+ content:props.content,
+ close:props.close
+ };
}
render(): React.ReactNode {
@@ -31,10 +32,6 @@ export class AlertInfo extends React.PureComponent {