From 7e08b63636dc3eac73f4ac02b52d5d6d856e7b2e Mon Sep 17 00:00:00 2001 From: Tom Aitken Date: Fri, 30 Aug 2024 00:04:29 +1000 Subject: [PATCH] fixed issues --- src/footnote-editing/converters.ts | 26 ++++----- src/footnote-editing/footnote-editing.ts | 14 ++--- src/footnote-ui.ts | 8 ++- src/insert-footnote-command.ts | 6 -- src/utils.ts | 72 +----------------------- 5 files changed, 22 insertions(+), 104 deletions(-) diff --git a/src/footnote-editing/converters.ts b/src/footnote-editing/converters.ts index 4da3d4a35..8ba3e0560 100644 --- a/src/footnote-editing/converters.ts +++ b/src/footnote-editing/converters.ts @@ -7,7 +7,7 @@ import { toWidgetEditable } from 'ckeditor5'; import { ATTRIBUTES, CLASSES, ELEMENTS } from '../constants.js'; -import { viewQueryElement, viewQueryText } from '../utils.js'; +import { viewQueryElement } from '../utils.js'; /** * Defines methods for converting between model, data view, and editing view representations of each element type. @@ -107,7 +107,6 @@ export const defineConverters = ( editor: Editor ): void => { [ ATTRIBUTES.footnoteContent ]: '', class: CLASSES.footnoteContent } ); - console.log( 'section', section ); return toWidgetEditable( section, viewWriter ); } @@ -163,6 +162,7 @@ export const defineConverters = ( editor: Editor ): void => { const modelWriter = conversionApi.writer; const index = viewElement.getAttribute( ATTRIBUTES.footnoteIndex ); const id = viewElement.getAttribute( ATTRIBUTES.footnoteId ); + if ( index === undefined || id === undefined ) { return null; } @@ -179,7 +179,6 @@ export const defineConverters = ( editor: Editor ): void => { view: ( modelElement, conversionApi ) => { const viewWriter = conversionApi.writer; const footnoteReferenceViewElement = createFootnoteReferenceViewElement( modelElement, conversionApi ); - console.log( 'footnoteReferenceViewElement', footnoteReferenceViewElement ); return toWidget( footnoteReferenceViewElement, viewWriter ); } } ); @@ -193,13 +192,13 @@ export const defineConverters = ( editor: Editor ): void => { * When that event fires, the callback function below updates the displayed view of the footnote reference in the * editor to match the new index. */ - // conversion.for( 'editingDowncast' ).add( dispatcher => { - // dispatcher.on( - // `attribute:${ ATTRIBUTES.footnoteIndex }:${ ELEMENTS.footnoteReference }`, - // ( _, data, conversionApi ) => updateFootnoteReferenceView( data, conversionApi, editor ), - // { priority: 'high' } - // ); - // } ); + conversion.for( 'editingDowncast' ).add( dispatcher => { + dispatcher.on( + `attribute:${ ATTRIBUTES.footnoteIndex }:${ ELEMENTS.footnoteReference }`, + ( _, data, conversionApi ) => updateFootnoteReferenceView( data, conversionApi, editor ), + { priority: 'high' } + ); + } ); /** *********************************Footnote Back Link Conversion************************************/ @@ -274,7 +273,6 @@ function createFootnoteReferenceViewElement( modelElement: Element, conversionApi: DowncastConversionApi ): ViewContainerElement { - console.log( 'createFootnoteReferenceViewElement' ); const viewWriter = conversionApi.writer; const index = `${ modelElement.getAttribute( ATTRIBUTES.footnoteIndex ) }`; const id = `${ modelElement.getAttribute( ATTRIBUTES.footnoteId ) }`; @@ -285,9 +283,6 @@ function createFootnoteReferenceViewElement( throw new Error( 'Footnote reference has no provided id.' ); } - console.log( 'index', index ); - console.log( 'id', id ); - const footnoteReferenceView = viewWriter.createContainerElement( 'span', { class: CLASSES.footnoteReference, [ ATTRIBUTES.footnoteReference ]: '', @@ -364,15 +359,14 @@ function updateFootnoteReferenceView( const viewWriter = conversionApi.writer; - const textNode = viewQueryText( editor, footnoteReferenceView, _ => true ); const anchor = viewQueryElement( editor, footnoteReferenceView, element => element.name === 'a' ); + const textNode = anchor?.getChild( 0 ); if ( !textNode || !anchor ) { viewWriter.remove( footnoteReferenceView ); return; } - // @ts-expect-error TextNode not accepted viewWriter.remove( textNode ); const innerText = viewWriter.createText( `[${ newIndex }]` ); viewWriter.insert( viewWriter.createPositionAt( anchor, 0 ), innerText ); diff --git a/src/footnote-editing/footnote-editing.ts b/src/footnote-editing/footnote-editing.ts index bdf279220..402f63459 100644 --- a/src/footnote-editing/footnote-editing.ts +++ b/src/footnote-editing/footnote-editing.ts @@ -53,7 +53,6 @@ export default class FootnoteEditing extends Plugin { 'change:data', ( eventInfo, batch ) => { const eventSource: any = eventInfo.source; - console.log( eventSource.differ.getChanges() ); const diffItems = [ ...eventSource.differ.getChanges() ]; // If a footnote reference is inserted, ensure that footnote references remain ordered. if ( diffItems.some( diffItem => diffItem.type === 'insert' && diffItem.name === ELEMENTS.footnoteReference ) ) { @@ -71,7 +70,6 @@ export default class FootnoteEditing extends Plugin { this._updateReferenceIndices( batch, `${ footnoteId }`, newFootnoteIndex ); } } ); - console.log( 'reached end of change:data' ); }, { priority: 'high' } ); @@ -302,17 +300,17 @@ export default class FootnoteEditing extends Plugin { for ( const footnote of modelQueryElementsAll( this.editor, footnoteSection, e => e.is( 'element', ELEMENTS.footnoteItem ) ) ) { - const index = `${ footnoteSection?.getChildIndex( footnote ) ?? -1 + 1 }`; + const index = `${ ( footnoteSection?.getChildIndex( footnote ) ?? -1 ) + 1 }`; if ( footnote ) { writer.setAttribute( ATTRIBUTES.footnoteIndex, index, footnote ); } const id = footnote.getAttribute( ATTRIBUTES.footnoteId ); - /** - * unfortunately the following line seems to be necessary, even though updateReferenceIndices - * should fire from the attribute change immediately above. It seems that events initiated by - * a `change:data` event do not themselves fire another `change:data` event. - */ + // /** + // * unfortunately the following line seems to be necessary, even though updateReferenceIndices + // * should fire from the attribute change immediately above. It seems that events initiated by + // * a `change:data` event do not themselves fire another `change:data` event. + // */ if ( id ) { this._updateReferenceIndices( batch, `${ id }`, `${ index }` ); } diff --git a/src/footnote-ui.ts b/src/footnote-ui.ts index 7ca407702..3cbb689de 100644 --- a/src/footnote-ui.ts +++ b/src/footnote-ui.ts @@ -42,6 +42,7 @@ export default class FootnoteUI extends Plugin { dropdownView.on( 'change:isOpen', ( evt, propertyName, newValue ) => { + dropdownView?.listView?.items.clear(); if ( newValue ) { addListToDropdown( dropdownView, @@ -49,18 +50,19 @@ export default class FootnoteUI extends Plugin { ); } else { dropdownView?.listView?.items.clear(); + const listElement = dropdownView?.listView?.element; + if ( listElement && listElement.parentNode ) { + listElement.parentNode.removeChild( listElement ); + } } } ); // Execute the command when the dropdown item is clicked (executed). this.listenTo( dropdownView, 'execute', evt => { - console.log( 'commandParam', ( evt.source as any ).commandParam ); editor.execute( COMMANDS.insertFootnote, { footnoteIndex: ( evt.source as any ).commandParam } ); - console.log( 'completed execution' ); editor.editing.view.focus(); - console.log( 'post focus' ); } ); return dropdownView; diff --git a/src/insert-footnote-command.ts b/src/insert-footnote-command.ts index 0467b1ad7..802ccda04 100644 --- a/src/insert-footnote-command.ts +++ b/src/insert-footnote-command.ts @@ -47,11 +47,9 @@ export default class InsertFootnoteCommand extends Command { modelWriter.setSelection( footnoteReference, 'after' ); // if referencing an existing footnote if ( footnoteIndex !== 0 ) { - console.log( 'erroneous footnoteIndex' ); return; } - console.log( 'we made it here' ); const footnoteContent = modelWriter.createElement( ELEMENTS.footnoteContent ); const footnoteItem = modelWriter.createElement( ELEMENTS.footnoteItem, { [ ATTRIBUTES.footnoteId ]: id, @@ -62,13 +60,11 @@ export default class InsertFootnoteCommand extends Command { modelWriter.append( p, footnoteContent ); modelWriter.append( footnoteContent, footnoteItem ); modelWriter.insert( footnoteBackLink, footnoteItem, 0 ); - console.log( 'we made it here 1' ); this.editor.model.insertContent( footnoteItem, modelWriter.createPositionAt( footnoteSection, footnoteSection.maxOffset ) ); - console.log( 'we made it here 2' ); } ); } @@ -78,11 +74,9 @@ export default class InsertFootnoteCommand extends Command { */ public override refresh(): void { const model = this.editor.model; - console.log( 'over here' ); const lastPosition = model.document.selection.getLastPosition(); const allowedIn = lastPosition && model.schema.findAllowedParent( lastPosition, ELEMENTS.footnoteSection ); this.isEnabled = allowedIn !== null; - console.log( 'now here' ); } /** diff --git a/src/utils.ts b/src/utils.ts index 53ef3b440..5121b8b5c 100644 --- a/src/utils.ts +++ b/src/utils.ts @@ -1,4 +1,4 @@ -import { type Editor, Element, Text, TextProxy, ViewElement, ViewText } from 'ckeditor5'; +import { type Editor, Element, Text, TextProxy, ViewElement } from 'ckeditor5'; // There's ample DRY violation in this file; type checking // polymorphism without full typescript is just incredibly finicky. @@ -53,54 +53,6 @@ export const modelQueryTextAll = ( return output; }; -/** - * Returns an array of all descendant elements of - * the root for which the provided predicate returns true. - */ -export const viewQueryElementsAll = ( - editor: Editor, - rootElement: ViewElement, - predicate: ( item: ViewElement ) => boolean = _ => true -): Array => { - const range = editor.editing.view.createRangeIn( rootElement ); - const output: Array = []; - - for ( const item of range.getItems() ) { - if ( !( item instanceof ViewElement ) ) { - continue; - } - - if ( predicate( item ) ) { - output.push( item ); - } - } - return output; -}; - -/** - * Returns an array of all descendant text nodes and text proxies of - * the root for which the provided predicate returns true. - */ -export const viewQueryTextAll = ( - editor: Editor, - rootElement: ViewElement, - predicate: ( item: ViewText | TextProxy ) => boolean = _ => true -): Array => { - const range = editor.editing.view.createRangeIn( rootElement ); - const output: Array = []; - - for ( const item of range.getItems() ) { - if ( !( item instanceof ViewText || item instanceof TextProxy ) ) { - continue; - } - - if ( predicate( item ) ) { - output.push( item ); - } - } - return output; -}; - /** * Returns the first descendant element of the root for which the provided * predicate returns true, or null if no such element is found. @@ -170,25 +122,3 @@ export const viewQueryElement = ( return null; }; -/** - * Returns the first descendant text node or text proxy of the root for which the provided - * predicate returns true, or null if no such element is found. - */ -export const viewQueryText = ( - editor: Editor, - rootElement: ViewElement, - predicate: ( item: ViewText | TextProxy ) => boolean = _ => true -): ViewText | TextProxy | null => { - const range = editor.editing.view.createRangeIn( rootElement ); - - for ( const item of range.getItems() ) { - if ( !( item instanceof ViewText || item instanceof TextProxy ) ) { - continue; - } - - if ( predicate( item ) ) { - return item; - } - } - return null; -};