8510735337

Committed 01 Apr 2024 04:37PM UTC coverage: 64.532% (+1.3%) from 63.188%

Build # 8510735337

Build Type

push

github

Committed by

web-flow

Commit Message

Merge pull request #249 from kommitters/v2.0

Release v2.0.27

Run Details

105 of 174 branches covered (60.34%)

Branch coverage included in aggregate %.

8 of 14 new or added lines in 1 file covered. (57.14%)

1 existing line in 1 file now uncovered.

157 of 232 relevant lines covered (67.67%)

26.06 hits per line

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

70.23

/src/index.js

import VanillaCaret from "vanilla-caret-js";
import Observer from "./observer";

/**
 * Undo/Redo feature for Editor.js.
 *
 * @typedef {Object} Undo
 * @description Feature's initialization class.
 * @property {Object} editor — Editor.js instance object.
 * @property {Number} maxLength - Max amount of changes recorded by the history stack.
 * @property {Function} onUpdate - Callback called when the user performs an undo or redo action.
 * @property {Boolean} shouldSaveHistory - Defines if the plugin should save the change in the stack
 * @property {Object} initialItem - Initial data object.
 */
export default class Undo {
  /**
   * @param options — Plugin custom options.
   */
  constructor({ editor, config = {}, onUpdate, maxLength }) {
    const defaultOptions = {
      maxLength: 30,
      onUpdate() {},
      config: {
        debounceTimer: 200,
        shortcuts: {
          undo: ["CMD+Z"],
          redo: ["CMD+Y", "CMD+SHIFT+Z"],
        },
      },
    };

    const { blocks, caret } = editor;
    const { configuration } = editor;
    const { holder, defaultBlock } = configuration;
    const defaultShortcuts = defaultOptions.config.shortcuts;
    const { shortcuts: configShortcuts } = config;
    const shortcuts = { ...defaultShortcuts, ...configShortcuts };
    const undo = Array.isArray(shortcuts.undo) ? shortcuts.undo : [shortcuts.undo];
    const redo = Array.isArray(shortcuts.redo) ? shortcuts.redo : [shortcuts.redo];
    const defaultDebounceTimer = defaultOptions.config.debounceTimer;
    const { debounceTimer = defaultDebounceTimer } = config;

    this.holder =
      typeof holder === "string" ? document.getElementById(holder) : holder;
    this.editor = editor;
    this.defaultBlock = defaultBlock;
    this.blocks = blocks;
    this.caret = caret;
    this.shouldSaveHistory = true;
    this.readOnly = configuration.readOnly;
    this.maxLength = maxLength || defaultOptions.maxLength;
    this.onUpdate = onUpdate || defaultOptions.onUpdate;
    this.config = { debounceTimer, shortcuts: { undo, redo } };

    const observer = new Observer(
      () => this.registerChange(),
      this.holder,
      this.config.debounceTimer
    );
    observer.setMutationObserver();

    this.setEventListeners();
    this.initialItem = null;
    this.clear();
  }

  /**
   * Notify core that read-only mode is suppoorted
   *
   * @returns {boolean}
   */
  static get isReadOnlySupported() {
    return true;
  }

  /**
   * Truncates the history stack when it excedes the limit of changes.
   *
   * @param {Object} stack  Changes history stack.
   * @param {Number} stack  Limit of changes recorded by the history stack.
   */
  truncate(stack, limit) {
    while (stack.length > limit) {
      stack.shift();
    }
  }

  /**
   * Initializes the stack when the user provides initial data.
   *
   * @param {Object} initialItem  Initial data provided by the user.
   */
  initialize(initialItem) {
    const initialData =
      "blocks" in initialItem ? initialItem.blocks : initialItem;
    const initialIndex = initialData.length - 1;
    const firstElement = { index: initialIndex, state: initialData };
    this.stack[0] = firstElement;
    this.initialItem = firstElement;
  }

  /**
   * Clears the history stack.
   */
  clear() {
    this.stack = this.initialItem
      ? [this.initialItem]
      : [{ index: 0, state: [{ type: this.defaultBlock, data: {} }] }];
    this.position = 0;
    this.onUpdate();
  }

  /**
   * Returns true if readOnly was toggled to true
   * @returns {Node} Indirectly shows if readOnly was set to true or false
   */
  setReadOnly() {
    const toolbox = this.holder.querySelector(".ce-toolbox");
    this.readOnly = !toolbox;
  }

  /**
   * Registers the data returned by API's save method into the history stack.
   */
  registerChange() {
    this.setReadOnly();
    if (!this.readOnly) {
      if (this.editor && this.editor.save && this.shouldSaveHistory) {
        this.editor.save().then((savedData) => {
          if (this.editorDidUpdate(savedData.blocks))
            this.save(savedData.blocks);
        });
      }
      this.shouldSaveHistory = true;
    }
  }

  /**
   * Checks if the saved data has to be added to the history stack.
   *
   * @param {Object} newData  New data to be saved in the history stack.
   * @returns {Boolean}
   */
  editorDidUpdate(newData) {
    const { state } = this.stack[this.position];
    if (!newData.length) return false;
    if (newData.length !== state.length) return true;

    return JSON.stringify(state) !== JSON.stringify(newData);
  }

  /**
   * Adds the saved data in the history stack and updates current position.
   */
  save(state) {
    if (this.position >= this.maxLength) {
      this.truncate(this.stack, this.maxLength);
    }
    this.position = Math.min(this.position, this.stack.length - 1);

    this.stack = this.stack.slice(0, this.position + 1);

    const index = this.blocks.getCurrentBlockIndex();
    const blockCount = this.blocks.getBlocksCount();
    let indexInState = index;

    if (!state[index]) indexInState -= blockCount - state.length;
    const caretIndex =
      state[indexInState] && (
        state[indexInState].type === "paragraph" ||
        state[indexInState].type === "header")
        ? this.getCaretIndex(index)
        : null;
    this.stack.push({ index: indexInState, state, caretIndex });
    this.position += 1;
    this.onUpdate();
  }

  /**
   * Gets the caret position.
   * @param {Number} index is the block index
   * @returns The caret position
   */
  getCaretIndex(index) {
    const blocks = this.holder.getElementsByClassName("ce-block__content");
    const caretBlock = new VanillaCaret(blocks[index].firstChild);

    return caretBlock.getPos();
  }

  /**
   * Inserts a block deleted previously
   * @param {Array} state is the current state according to this.position.
   * @param {Array} compState is the state to compare and know the deleted block.
   * @param {Number} index is the block index in state.
   */
  insertDeletedBlock(state, compState, index) {
    for (let i = 0; i < state.length; i += 1) {
      if (!compState[i] || state[i].id !== compState[i].id) {
        this.blocks.insert(state[i].type, state[i].data, {}, i, true);
        this.caret.setToBlock(index, "end");
        break;
      }
    }
  }

  /**
   * Returns true if a block was dropped previously
   * @param {Array} state is the current state according to this.position.
   * @param {Array} compState is the state to compare and know the dropped block.
   * @returns {Boolean} true if the block was dropped
   */
  blockWasDropped(state, compState) {
    if (state.length === compState.length) {
      return state.some((block, i) => block.id !== compState[i].id);
    }
    return false;
  }

  /**
   * Returns true if the block has to be deleted because it was skipped previously.
   * @param {Array} state is the current state according to this.position.
   * @param {Array} compState is the state to compare if there was a deleted block.
   * @returns {Boolean} true if a block was inserted previously.
   */
  blockWasSkipped(state, compState) {
    return state.length !== compState.length;
  }

  /**
   * Returns true if the content in a block without the focus was modified.
   * @param {Number} index is the block index in state.
   * @param {Number} compIndex is the index to compare and know if the block was inserted previously
   * @returns true if the content in a block without the focus was modified.
   */
  contentChangedInNoFocusBlock(index, compIndex) {
    return index !== compIndex;
  }

  /**
   * Returns true if a block was deleted previously.
   * @param {Array} state is the current state according to this.position.
   * @param {Array} compState is the state to compare and know if a block was deleted.
   * @returns {Boolean} true if a block was deleted previously.
   */
  blockWasDeleted(state, compState) {
    return state.length > compState.length;
  }

  /**
   * Returns true if the content was copied.
   * @param {Array} state is the current state according to this.position.
   * @param {Array} compState is the state to compare and know if the content was copied.
   * @param {Number} index is the block index in state.
   * @returns {Boolean} true if a block was deleted previously.
   */
  contentWasCopied(state, compState, index) {
    return Object.keys(state[index].data).length === 0
      && JSON.stringify(compState[index + 1]) !== JSON.stringify(state[index + 1]);
  }

  /**
   * Decreases the current position and update the respective block in the editor.
   */
  async undo() {
    if (this.canUndo()) {
      const { index: nextIndex, state: nextState } = this.stack[this.position];

      this.position -= 1;
      this.shouldSaveHistory = false;
      let { index } = this.stack[this.position];
      const { state, caretIndex } = this.stack[this.position];

      this.onUpdate();
      const blockCount = this.blocks.getBlocksCount();

      if (!state[index]) {
        index -= 1;
        this.stack[this.position].index = index;
      }

      if (this.blockWasDeleted(state, nextState)) {
        this.insertDeletedBlock(state, nextState, index);
      } else if (this.contentWasCopied(state, nextState, index)) {
        await this.blocks.render({ blocks: state });
        this.caret.setToBlock(index, 'end');
      } else if (index < nextIndex && this.blockWasSkipped(state, nextState)) {
        await this.blocks.delete(nextIndex);
        this.caret.setToBlock(index, "end");
      } else if (blockCount > state.length) {
        await this.blocks.render({ blocks: state });
        this.setCaretIndex(index, caretIndex);
      } else if (this.blockWasDropped(state, nextState)) {
        await this.blocks.render({ blocks: state });
        this.caret.setToBlock(index, 'end');
      } else if (this.contentChangedInNoFocusBlock(index, nextIndex)) {
        const { id } = this.blocks.getBlockByIndex(nextIndex);

        await this.blocks.update(id, state[nextIndex].data);
        this.setCaretIndex(index, caretIndex);
      }

      const block = this.blocks.getBlockByIndex(index);
      if (block) {
        await this.blocks.update(block.id, state[index].data);
        this.setCaretIndex(index, caretIndex);
      }
    }
  }

  /**
   * Sets the caret position.
   * @param {Number} index is the block index
   * @param {Number} caretIndex is the caret position
   * @param {Array} state is the current state according to this.position.
   */
  setCaretIndex(index, caretIndex) {
    if (caretIndex && caretIndex !== -1) {
      const blocks = this.holder.getElementsByClassName("ce-block__content");
      const caretBlock = new VanillaCaret(blocks[index].firstChild);
      setTimeout(() => caretBlock.setPos(caretIndex), 50);
    } else {
      this.caret.setToBlock(index, "end");
    }
  }

  /**
   * Inserts new block
   * @param {Array} state is the current state according to this.position.
   * @param {Number} index is the block index
   */
  async insertBlock(state, index) {
    await this.blocks.insert(
      state[index].type,
      state[index].data,
      {},
      index,
      true,
    );
  }

  /**
   * Inserts a block when is skipped and update the previous one if it changed.
   * @param {Array} prevState is the previous state according to this.position.
   * @param {Array} state is the current state according to this.position.
   * @param {Number} index is the block index.
   */
  async insertSkippedBlocks(prevState, state, index) {
    for (let i = prevState.length; i < state.length; i += 1) {
      this.insertBlock(state, i);
    }

    if (JSON.stringify(prevState[index - 1]) !== JSON.stringify(state[index - 1])) {
      await this.updateModifiedBlock(state, index);
    }
  }

  /**
   * Updates the passed block or render the state when the content was copied.
   * @param {Array} state is the current state according to this.position.
   * @param {Number} index is the block index.
   */
  async updateModifiedBlock(state, index) {
    const block = state[index - 1];
    if (this.editor.blocks.getById(block.id)) return this.blocks.update(block.id, block.data);
    return this.blocks.render({ blocks: state });
  }

  /**
   * Increases the current position and update the respective block in the editor.
   */
  async redo() {
    if (this.canRedo()) {
      this.position += 1;
      this.shouldSaveHistory = false;
      const { index, state, caretIndex } = this.stack[(this.position)];
      const { index: prevIndex, state: prevState } =
        this.stack[this.position - 1];

      if (this.blockWasDeleted(prevState, state)) {
        await this.blocks.delete();
        this.caret.setToBlock(index, "end");
      } else if (this.blockWasSkipped(state, prevState)) {
        await this.insertSkippedBlocks(prevState, state, index);
        this.caret.setToBlock(index, 'end');
      } else if (this.blockWasDropped(state, prevState) && this.position !== 1) {
        await this.blocks.render({ blocks: state });
        this.caret.setToBlock(index, "end");
      }

      this.onUpdate();
      const block = this.blocks.getBlockByIndex(index);
      if (block) {
        await this.blocks.update(block.id, state[index].data);
        this.setCaretIndex(index, caretIndex);
      }
    }
  }

  /**
   * Checks if the history stack can perform an undo action.
   *
   * @returns {Boolean}
   */
  canUndo() {
    return !this.readOnly && this.position > 0;
  }

  /**
   * Checks if the history stack can perform a redo action.
   *
   * @returns {Boolean}
   */
  canRedo() {
    return !this.readOnly && this.position < this.count();
  }

  /**
   * Returns the number of changes recorded in the history stack.
   *
   * @returns {Number}
   */
  count() {
    return this.stack.length - 1; // -1 because of initial item
  }

  /**
   * Parses the keys passed in the shortcut property to accept CMD,ALT and SHIFT
   *
   * @param {Array} keys are the keys passed in shortcuts in config
   * @returns {Array}
   */

  parseKeys(keys) {
    const specialKeys = {
      CMD: /(Mac)/i.test(navigator.platform) ? "metaKey" : "ctrlKey",
      ALT: "altKey",
      SHIFT: "shiftKey",
    };
    const parsedKeys = keys.slice(0, -1).map((key) => specialKeys[key]);

    const letterKey =
      parsedKeys.includes("shiftKey") && keys.length === 2
        ? keys[keys.length - 1].toUpperCase()
        : keys[keys.length - 1].toLowerCase();

    parsedKeys.push(letterKey);
    return parsedKeys;
  }

  /**
   * Sets events listeners to allow keyboard actions support
   */

  setEventListeners() {
    const { holder } = this;
    const { shortcuts } = this.config;
    const { undo, redo } = shortcuts;
    const keysUndo = undo.map((undoShortcut) => undoShortcut.replace(/ /g, "").split("+"));
    const keysRedo = redo.map((redoShortcut) => redoShortcut.replace(/ /g, "").split("+"));

    const keysUndoParsed = keysUndo.map((keys) => this.parseKeys(keys));
    const keysRedoParsed = keysRedo.map((keys) => this.parseKeys(keys));

    const twoKeysPressed = (e, keys) =>
      keys.length === 2 && e[keys[0]] && (e.key.toLowerCase() === keys[1]);
    const threeKeysPressed = (e, keys) =>
      keys.length === 3 && e[keys[0]] && e[keys[1]] && (e.key.toLowerCase() === keys[2]);

    const verifyListTwoKeysPressed = (e, keysList) =>
      keysList.reduce((result, keys) => result || twoKeysPressed(e, keys), false);
    const verifyListThreeKeysPressed = (e, keysList) =>
      keysList.reduce((result, keys) => result || threeKeysPressed(e, keys), false);

    const pressedKeys = (e, keys, compKeys) => {
      if (verifyListTwoKeysPressed(e, keys) && !verifyListThreeKeysPressed(e, compKeys)) {
        return true;
      }
      if (verifyListThreeKeysPressed(e, keys)) {
        return true;
      }
      return false;
    };

    const handleUndo = (e) => {
      if (pressedKeys(e, keysUndoParsed, keysRedoParsed)) {
        e.preventDefault();
        this.undo();
      }
    };

    const handleRedo = (e) => {
      if (pressedKeys(e, keysRedoParsed, keysUndoParsed)) {
        e.preventDefault();
        this.redo();
      }
    };

    const handleDestroy = () => {
      holder.removeEventListener("keydown", handleUndo);
      holder.removeEventListener("keydown", handleRedo);
    };

    holder.addEventListener("keydown", handleUndo);
    holder.addEventListener("keydown", handleRedo);
    holder.addEventListener("destroy", handleDestroy);
  }
}

1	import VanillaCaret from "vanilla-caret-js";
2	import Observer from "./observer";
3
4	/**
5	* Undo/Redo feature for Editor.js.
6	*
7	* @typedef {Object} Undo
8	* @description Feature's initialization class.
9	* @property {Object} editor — Editor.js instance object.
10	* @property {Number} maxLength - Max amount of changes recorded by the history stack.
11	* @property {Function} onUpdate - Callback called when the user performs an undo or redo action.
12	* @property {Boolean} shouldSaveHistory - Defines if the plugin should save the change in the stack
13	* @property {Object} initialItem - Initial data object.
14	*/
15	export default class Undo {
16	/**
17	* @param options — Plugin custom options.
18	*/
19	constructor({ editor, config = {}, onUpdate, maxLength }) {	18✔
20	const defaultOptions = {	46✔
21	maxLength: 30,
22	onUpdate() {},
23	config: {
24	debounceTimer: 200,
25	shortcuts: {
26	undo: ["CMD+Z"],
27	redo: ["CMD+Y", "CMD+SHIFT+Z"],
28	},
29	},
30	};
31
32	const { blocks, caret } = editor;	46✔
33	const { configuration } = editor;	46✔
34	const { holder, defaultBlock } = configuration;	46✔
35	const defaultShortcuts = defaultOptions.config.shortcuts;	46✔
36	const { shortcuts: configShortcuts } = config;	46✔
37	const shortcuts = { ...defaultShortcuts, ...configShortcuts };	46✔
38	const undo = Array.isArray(shortcuts.undo) ? shortcuts.undo : [shortcuts.undo];	46✔
39	const redo = Array.isArray(shortcuts.redo) ? shortcuts.redo : [shortcuts.redo];	46✔
40	const defaultDebounceTimer = defaultOptions.config.debounceTimer;	46✔
41	const { debounceTimer = defaultDebounceTimer } = config;	46✔
42
43	this.holder =	46✔
44	typeof holder === "string" ? document.getElementById(holder) : holder;	23✔
45	this.editor = editor;	46✔
46	this.defaultBlock = defaultBlock;	46✔
47	this.blocks = blocks;	46✔
48	this.caret = caret;	46✔
49	this.shouldSaveHistory = true;	46✔
50	this.readOnly = configuration.readOnly;	46✔
51	this.maxLength = maxLength \|\| defaultOptions.maxLength;	46✔
52	this.onUpdate = onUpdate \|\| defaultOptions.onUpdate;	46✔
53	this.config = { debounceTimer, shortcuts: { undo, redo } };	46✔
54
55	const observer = new Observer(	46✔
56	() => this.registerChange(),	×
57	this.holder,
58	this.config.debounceTimer
59	);
60	observer.setMutationObserver();	46✔
61
62	this.setEventListeners();	46✔
63	this.initialItem = null;	46✔
64	this.clear();	46✔
65	}
66
67	/**
68	* Notify core that read-only mode is suppoorted
69	*
70	* @returns {boolean}
71	*/
72	static get isReadOnlySupported() {
73	return true;	×
74	}
75
76	/**
77	* Truncates the history stack when it excedes the limit of changes.
78	*
79	* @param {Object} stack Changes history stack.
80	* @param {Number} stack Limit of changes recorded by the history stack.
81	*/
82	truncate(stack, limit) {
83	while (stack.length > limit) {	×
84	stack.shift();	×
85	}
86	}
87
88	/**
89	* Initializes the stack when the user provides initial data.
90	*
91	* @param {Object} initialItem Initial data provided by the user.
92	*/
93	initialize(initialItem) {
94	const initialData =
95	"blocks" in initialItem ? initialItem.blocks : initialItem;	38!
96	const initialIndex = initialData.length - 1;	38✔
97	const firstElement = { index: initialIndex, state: initialData };	38✔
98	this.stack[0] = firstElement;	38✔
99	this.initialItem = firstElement;	38✔
100	}
101
102	/**
103	* Clears the history stack.
104	*/
105	clear() {
106	this.stack = this.initialItem	46!
107	? [this.initialItem]
108	: [{ index: 0, state: [{ type: this.defaultBlock, data: {} }] }];
109	this.position = 0;	46✔
110	this.onUpdate();	46✔
111	}
112
113	/**
114	* Returns true if readOnly was toggled to true
115	* @returns {Node} Indirectly shows if readOnly was set to true or false
116	*/
117	setReadOnly() {
118	const toolbox = this.holder.querySelector(".ce-toolbox");	2✔
119	this.readOnly = !toolbox;	2✔
120	}
121
122	/**
123	* Registers the data returned by API's save method into the history stack.
124	*/
125	registerChange() {
126	this.setReadOnly();	2✔
127	if (!this.readOnly) {	2!
128	if (this.editor && this.editor.save && this.shouldSaveHistory) {	×
129	this.editor.save().then((savedData) => {	×
130	if (this.editorDidUpdate(savedData.blocks))	×
131	this.save(savedData.blocks);	×
132	});
133	}
134	this.shouldSaveHistory = true;	×
135	}
136	}
137
138	/**
139	* Checks if the saved data has to be added to the history stack.
140	*
141	* @param {Object} newData New data to be saved in the history stack.
142	* @returns {Boolean}
143	*/
144	editorDidUpdate(newData) {
145	const { state } = this.stack[this.position];	×
146	if (!newData.length) return false;	×
147	if (newData.length !== state.length) return true;	×
148
149	return JSON.stringify(state) !== JSON.stringify(newData);	×
150	}
151
152	/**
153	* Adds the saved data in the history stack and updates current position.
154	*/
155	save(state) {
156	if (this.position >= this.maxLength) {	68!
157	this.truncate(this.stack, this.maxLength);	×
158	}
159	this.position = Math.min(this.position, this.stack.length - 1);	68✔
160
161	this.stack = this.stack.slice(0, this.position + 1);	68✔
162
163	const index = this.blocks.getCurrentBlockIndex();	68✔
164	const blockCount = this.blocks.getBlocksCount();	68✔
165	let indexInState = index;	68✔
166
167	if (!state[index]) indexInState -= blockCount - state.length;	68!
168	const caretIndex =
169	state[indexInState] && (	68!
170	state[indexInState].type === "paragraph" \|\|
171	state[indexInState].type === "header")
172	? this.getCaretIndex(index)
173	: null;
174	this.stack.push({ index: indexInState, state, caretIndex });	68✔
175	this.position += 1;	68✔
176	this.onUpdate();	68✔
177	}
178
179	/**
180	* Gets the caret position.
181	* @param {Number} index is the block index
182	* @returns The caret position
183	*/
184	getCaretIndex(index) {
185	const blocks = this.holder.getElementsByClassName("ce-block__content");	68✔
186	const caretBlock = new VanillaCaret(blocks[index].firstChild);	68✔
187
188	return caretBlock.getPos();	68✔
189	}
190
191	/**
192	* Inserts a block deleted previously
193	* @param {Array} state is the current state according to this.position.
194	* @param {Array} compState is the state to compare and know the deleted block.
195	* @param {Number} index is the block index in state.
196	*/
197	insertDeletedBlock(state, compState, index) {
198	for (let i = 0; i < state.length; i += 1) {	×
199	if (!compState[i] \|\| state[i].id !== compState[i].id) {	×
200	this.blocks.insert(state[i].type, state[i].data, {}, i, true);	×
201	this.caret.setToBlock(index, "end");	×
202	break;	×
203	}
204	}
205	}
206
207	/**
208	* Returns true if a block was dropped previously
209	* @param {Array} state is the current state according to this.position.
210	* @param {Array} compState is the state to compare and know the dropped block.
211	* @returns {Boolean} true if the block was dropped
212	*/
213	blockWasDropped(state, compState) {
214	if (state.length === compState.length) {	28!
215	return state.some((block, i) => block.id !== compState[i].id);	×
216	}
217	return false;	28✔
218	}
219
220	/**
221	* Returns true if the block has to be deleted because it was skipped previously.
222	* @param {Array} state is the current state according to this.position.
223	* @param {Array} compState is the state to compare if there was a deleted block.
224	* @returns {Boolean} true if a block was inserted previously.
225	*/
226	blockWasSkipped(state, compState) {
227	return state.length !== compState.length;	12✔
228	}
229
230	/**
231	* Returns true if the content in a block without the focus was modified.
232	* @param {Number} index is the block index in state.
233	* @param {Number} compIndex is the index to compare and know if the block was inserted previously
234	* @returns true if the content in a block without the focus was modified.
235	*/
236	contentChangedInNoFocusBlock(index, compIndex) {
237	return index !== compIndex;	28✔
238	}
239
240	/**
241	* Returns true if a block was deleted previously.
242	* @param {Array} state is the current state according to this.position.
243	* @param {Array} compState is the state to compare and know if a block was deleted.
244	* @returns {Boolean} true if a block was deleted previously.
245	*/
246	blockWasDeleted(state, compState) {
247	return state.length > compState.length;	40✔
248	}
249
250	/**
251	* Returns true if the content was copied.
252	* @param {Array} state is the current state according to this.position.
253	* @param {Array} compState is the state to compare and know if the content was copied.
254	* @param {Number} index is the block index in state.
255	* @returns {Boolean} true if a block was deleted previously.
256	*/
257	contentWasCopied(state, compState, index) {
258	return Object.keys(state[index].data).length === 0	28!
259	&& JSON.stringify(compState[index + 1]) !== JSON.stringify(state[index + 1]);
260	}
261
262	/**
263	* Decreases the current position and update the respective block in the editor.
264	*/
265	async undo() {
266	if (this.canUndo()) {	28!
267	const { index: nextIndex, state: nextState } = this.stack[this.position];	28✔
268
269	this.position -= 1;	28✔
270	this.shouldSaveHistory = false;	28✔
271	let { index } = this.stack[this.position];	28✔
272	const { state, caretIndex } = this.stack[this.position];	28✔
273
274	this.onUpdate();	28✔
275	const blockCount = this.blocks.getBlocksCount();	28✔
276
277	if (!state[index]) {	28!
278	index -= 1;	×
279	this.stack[this.position].index = index;	×
280	}
281
282	if (this.blockWasDeleted(state, nextState)) {	28!
283	this.insertDeletedBlock(state, nextState, index);	×
284	} else if (this.contentWasCopied(state, nextState, index)) {	28!
NEW 285	await this.blocks.render({ blocks: state });	×
NEW 286	this.caret.setToBlock(index, 'end');	×
287	} else if (index < nextIndex && this.blockWasSkipped(state, nextState)) {	28!
288	await this.blocks.delete(nextIndex);	×
289	this.caret.setToBlock(index, "end");	×
290	} else if (blockCount > state.length) {	28!
291	await this.blocks.render({ blocks: state });	×
292	this.setCaretIndex(index, caretIndex);	×
293	} else if (this.blockWasDropped(state, nextState)) {	28!
294	await this.blocks.render({ blocks: state });	×
295	this.caret.setToBlock(index, 'end');	×
296	} else if (this.contentChangedInNoFocusBlock(index, nextIndex)) {	28!
297	const { id } = this.blocks.getBlockByIndex(nextIndex);	×
298
299	await this.blocks.update(id, state[nextIndex].data);	×
300	this.setCaretIndex(index, caretIndex);	×
301	}
302
303	const block = this.blocks.getBlockByIndex(index);	28✔
304	if (block) {	28!
305	await this.blocks.update(block.id, state[index].data);	28✔
306	this.setCaretIndex(index, caretIndex);	28✔
307	}
308	}
309	}
310
311	/**
312	* Sets the caret position.
313	* @param {Number} index is the block index
314	* @param {Number} caretIndex is the caret position
315	* @param {Array} state is the current state according to this.position.
316	*/
317	setCaretIndex(index, caretIndex) {
318	if (caretIndex && caretIndex !== -1) {	40!
319	const blocks = this.holder.getElementsByClassName("ce-block__content");	×
320	const caretBlock = new VanillaCaret(blocks[index].firstChild);	×
321	setTimeout(() => caretBlock.setPos(caretIndex), 50);	×
322	} else {
323	this.caret.setToBlock(index, "end");	40✔
324	}
325	}
326
327	/**
328	* Inserts new block
329	* @param {Array} state is the current state according to this.position.
330	* @param {Number} index is the block index
331	*/
332	async insertBlock(state, index) {
333	await this.blocks.insert(	12✔
334	state[index].type,
335	state[index].data,
336	{},
337	index,
338	true,
339	);
340	}
341
342	/**
343	* Inserts a block when is skipped and update the previous one if it changed.
344	* @param {Array} prevState is the previous state according to this.position.
345	* @param {Array} state is the current state according to this.position.
346	* @param {Number} index is the block index.
347	*/
348	async insertSkippedBlocks(prevState, state, index) {
349	for (let i = prevState.length; i < state.length; i += 1) {	12✔
350	this.insertBlock(state, i);	12✔
351	}
352
353	if (JSON.stringify(prevState[index - 1]) !== JSON.stringify(state[index - 1])) {	12!
NEW 354	await this.updateModifiedBlock(state, index);	×
355	}
356	}
357
358	/**
359	* Updates the passed block or render the state when the content was copied.
360	* @param {Array} state is the current state according to this.position.
361	* @param {Number} index is the block index.
362	*/
363	async updateModifiedBlock(state, index) {
NEW 364	const block = state[index - 1];	×
NEW 365	if (this.editor.blocks.getById(block.id)) return this.blocks.update(block.id, block.data);	×
NEW 366	return this.blocks.render({ blocks: state });	×
367	}
368
369	/**
370	* Increases the current position and update the respective block in the editor.
371	*/
372	async redo() {
373	if (this.canRedo()) {	14✔
374	this.position += 1;	12✔
375	this.shouldSaveHistory = false;	12✔
376	const { index, state, caretIndex } = this.stack[(this.position)];	12✔
377	const { index: prevIndex, state: prevState } =
378	this.stack[this.position - 1];	12✔
379
380	if (this.blockWasDeleted(prevState, state)) {	12!
381	await this.blocks.delete();	×
382	this.caret.setToBlock(index, "end");	×
383	} else if (this.blockWasSkipped(state, prevState)) {	12!
384	await this.insertSkippedBlocks(prevState, state, index);	12✔
385	this.caret.setToBlock(index, 'end');	12✔
UNCOV 386	} else if (this.blockWasDropped(state, prevState) && this.position !== 1) {	×
387	await this.blocks.render({ blocks: state });	×
388	this.caret.setToBlock(index, "end");	×
389	}
390
391	this.onUpdate();	12✔
392	const block = this.blocks.getBlockByIndex(index);	12✔
393	if (block) {	12!
394	await this.blocks.update(block.id, state[index].data);	12✔
395	this.setCaretIndex(index, caretIndex);	12✔
396	}
397	}
398	}
399
400	/**
401	* Checks if the history stack can perform an undo action.
402	*
403	* @returns {Boolean}
404	*/
405	canUndo() {
406	return !this.readOnly && this.position > 0;	32✔
407	}
408
409	/**
410	* Checks if the history stack can perform a redo action.
411	*
412	* @returns {Boolean}
413	*/
414	canRedo() {
415	return !this.readOnly && this.position < this.count();	18✔
416	}
417
418	/**
419	* Returns the number of changes recorded in the history stack.
420	*
421	* @returns {Number}
422	*/
423	count() {
424	return this.stack.length - 1; // -1 because of initial item	44✔
425	}
426
427	/**
428	* Parses the keys passed in the shortcut property to accept CMD,ALT and SHIFT
429	*
430	* @param {Array} keys are the keys passed in shortcuts in config
431	* @returns {Array}
432	*/
433
434	parseKeys(keys) {
435	const specialKeys = {	128✔
436	CMD: /(Mac)/i.test(navigator.platform) ? "metaKey" : "ctrlKey",	64!
437	ALT: "altKey",
438	SHIFT: "shiftKey",
439	};
440	const parsedKeys = keys.slice(0, -1).map((key) => specialKeys[key]);	164✔
441
442	const letterKey =
443	parsedKeys.includes("shiftKey") && keys.length === 2	128!
444	? keys[keys.length - 1].toUpperCase()
445	: keys[keys.length - 1].toLowerCase();
446
447	parsedKeys.push(letterKey);	128✔
448	return parsedKeys;	128✔
449	}
450
451	/**
452	* Sets events listeners to allow keyboard actions support
453	*/
454
455	setEventListeners() {
456	const { holder } = this;	46✔
457	const { shortcuts } = this.config;	46✔
458	const { undo, redo } = shortcuts;	46✔
459	const keysUndo = undo.map((undoShortcut) => undoShortcut.replace(/ /g, "").split("+"));	46✔
460	const keysRedo = redo.map((redoShortcut) => redoShortcut.replace(/ /g, "").split("+"));	82✔
461
462	const keysUndoParsed = keysUndo.map((keys) => this.parseKeys(keys));	46✔
463	const keysRedoParsed = keysRedo.map((keys) => this.parseKeys(keys));	82✔
464
465	const twoKeysPressed = (e, keys) =>	46✔
466	keys.length === 2 && e[keys[0]] && (e.key.toLowerCase() === keys[1]);	32✔
467	const threeKeysPressed = (e, keys) =>	46✔
468	keys.length === 3 && e[keys[0]] && e[keys[1]] && (e.key.toLowerCase() === keys[2]);	38✔
469
470	const verifyListTwoKeysPressed = (e, keysList) =>	46✔
471	keysList.reduce((result, keys) => result \|\| twoKeysPressed(e, keys), false);	34✔
472	const verifyListThreeKeysPressed = (e, keysList) =>	46✔
473	keysList.reduce((result, keys) => result \|\| threeKeysPressed(e, keys), false);	38✔
474
475	const pressedKeys = (e, keys, compKeys) => {	46✔
476	if (verifyListTwoKeysPressed(e, keys) && !verifyListThreeKeysPressed(e, compKeys)) {	28✔
477	return true;	8✔
478	}
479	if (verifyListThreeKeysPressed(e, keys)) {	20✔
480	return true;	2✔
481	}
482	return false;	18✔
483	};
484
485	const handleUndo = (e) => {	46✔
486	if (pressedKeys(e, keysUndoParsed, keysRedoParsed)) {	14✔
487	e.preventDefault();	4✔
488	this.undo();	4✔
489	}
490	};
491
492	const handleRedo = (e) => {	46✔
493	if (pressedKeys(e, keysRedoParsed, keysUndoParsed)) {	14✔
494	e.preventDefault();	6✔
495	this.redo();	6✔
496	}
497	};
498
499	const handleDestroy = () => {	46✔
500	holder.removeEventListener("keydown", handleUndo);	×
501	holder.removeEventListener("keydown", handleRedo);	×
502	};
503
504	holder.addEventListener("keydown", handleUndo);	46✔
505	holder.addEventListener("keydown", handleRedo);	46✔
506	holder.addEventListener("destroy", handleDestroy);	46✔
507	}
508	}

kommitters / editorjs-undo / 8510735337

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