Lexical: Finished off baseline shortcut implementation

diff --git a/resources/js/wysiwyg/index.ts b/resources/js/wysiwyg/index.ts
index 0a939baf4d084fdaed96ca2bacb399f7579356f5..d7f873ea5ccc2c2da8c703f539aad17221b2c088 100644 (file)
--- a/resources/js/wysiwyg/index.ts
+++ b/resources/js/wysiwyg/index.ts
@@ -45,11 +45,12 @@ export function createPageEditorInstance(container: HTMLElement, htmlContent: st
 
     const editor = createEditor(config);
     editor.setRootElement(editArea);
 
     const editor = createEditor(config);
     editor.setRootElement(editArea);

+    const context: EditorUiContext = buildEditorUI(container, editArea, editWrap, editor, options);

 
     mergeRegister(
         registerRichText(editor),
         registerHistory(editor, createEmptyHistoryState(), 300),
 
     mergeRegister(
         registerRichText(editor),
         registerHistory(editor, createEmptyHistoryState(), 300),

-        registerShortcuts(editor),
+        registerShortcuts(context),

         registerTableResizer(editor, editWrap),
         registerTableSelectionHandler(editor),
         registerTaskListHandler(editor, editArea),
         registerTableResizer(editor, editWrap),
         registerTableSelectionHandler(editor),
         registerTaskListHandler(editor, editArea),


@@ -89,7 +90,6 @@ export function createPageEditorInstance(container: HTMLElement, htmlContent: st
         console.log(editor.getEditorState().toJSON());
     };
 
         console.log(editor.getEditorState().toJSON());
     };
 

-    const context: EditorUiContext = buildEditorUI(container, editArea, editWrap, editor, options);

     registerCommonNodeMutationListeners(context);
 
     return new SimpleWysiwygEditorInterface(editor);
     registerCommonNodeMutationListeners(context);
 
     return new SimpleWysiwygEditorInterface(editor);

diff --git a/resources/js/wysiwyg/services/shortcuts.ts b/resources/js/wysiwyg/services/shortcuts.ts
index 235c2788ab1fb4681fd539cbe8fd513c0b166c23..b17ec1bf7a8abae352dd1b89a2962f41f7a4bcff 100644 (file)
--- a/resources/js/wysiwyg/services/shortcuts.ts
+++ b/resources/js/wysiwyg/services/shortcuts.ts
@@ -1,12 +1,17 @@
-import {COMMAND_PRIORITY_HIGH, FORMAT_TEXT_COMMAND, KEY_ENTER_COMMAND, LexicalEditor} from "lexical";
+import {$getSelection, COMMAND_PRIORITY_HIGH, FORMAT_TEXT_COMMAND, KEY_ENTER_COMMAND, LexicalEditor} from "lexical";

 import {
     cycleSelectionCalloutFormats,
 import {
     cycleSelectionCalloutFormats,

-    formatCodeBlock,
+    formatCodeBlock, insertOrUpdateLink,

     toggleSelectionAsBlockquote,
     toggleSelectionAsBlockquote,

-    toggleSelectionAsHeading,
+    toggleSelectionAsHeading, toggleSelectionAsList,

     toggleSelectionAsParagraph
 } from "../utils/formats";
 import {HeadingTagType} from "@lexical/rich-text";
     toggleSelectionAsParagraph
 } from "../utils/formats";
 import {HeadingTagType} from "@lexical/rich-text";

+import {EditorUiContext} from "../ui/framework/core";
+import {$getNodeFromSelection} from "../utils/selection";
+import {$isLinkNode, LinkNode} from "@lexical/link";
+import {$showLinkForm} from "../ui/defaults/forms/objects";
+import {showLinkSelector} from "../utils/links";

 
 function headerHandler(editor: LexicalEditor, tag: HeadingTagType): boolean {
     toggleSelectionAsHeading(editor, tag);
 
 function headerHandler(editor: LexicalEditor, tag: HeadingTagType): boolean {
     toggleSelectionAsHeading(editor, tag);


@@ -25,10 +30,9 @@ function toggleInlineCode(editor: LexicalEditor): boolean {
     return true;
 }
 
     return true;
 }
 

-type ShortcutAction = (editor: LexicalEditor) => boolean;
+type ShortcutAction = (editor: LexicalEditor, context: EditorUiContext) => boolean;

 
 const actionsByKeys: Record<string, ShortcutAction> = {
 
 const actionsByKeys: Record<string, ShortcutAction> = {

-    // Save draft

     'ctrl+s': () => {
         window.$events.emit('editor-save-draft');
         return true;
     'ctrl+s': () => {
         window.$events.emit('editor-save-draft');
         return true;


@@ -51,18 +55,35 @@ const actionsByKeys: Record<string, ShortcutAction> = {
     'ctrl+shift+e': toggleInlineCode,
     'ctrl+9': wrapFormatAction(cycleSelectionCalloutFormats),
 
     'ctrl+shift+e': toggleInlineCode,
     'ctrl+9': wrapFormatAction(cycleSelectionCalloutFormats),
 

-    // TODO Lists
-    // TODO Links
-    // TODO Link selector
+    'ctrl+o': wrapFormatAction((e) => toggleSelectionAsList(e, 'number')),
+    'ctrl+p': wrapFormatAction((e) => toggleSelectionAsList(e, 'bullet')),
+    'ctrl+k': (editor, context) => {
+        editor.getEditorState().read(() => {
+            const selectedLink = $getNodeFromSelection($getSelection(), $isLinkNode) as LinkNode | null;
+            $showLinkForm(selectedLink, context);
+        });
+        return true;
+    },
+    'ctrl+shift+k': (editor, context) => {
+        showLinkSelector(entity => {
+            insertOrUpdateLink(editor, {
+                text: entity.name,
+                title: entity.link,
+                target: '',
+                url: entity.link,
+            });
+        });
+        return true;
+    },

 };
 
 };
 

-function createKeyDownListener(editor: LexicalEditor): (e: KeyboardEvent) => void {
+function createKeyDownListener(context: EditorUiContext): (e: KeyboardEvent) => void {

     return (event: KeyboardEvent) => {
         // TODO - Mac Cmd support
         const combo = `${event.ctrlKey ? 'ctrl+' : ''}${event.shiftKey ? 'shift+' : ''}${event.key}`.toLowerCase();
     return (event: KeyboardEvent) => {
         // TODO - Mac Cmd support
         const combo = `${event.ctrlKey ? 'ctrl+' : ''}${event.shiftKey ? 'shift+' : ''}${event.key}`.toLowerCase();

-        console.log(`pressed: ${combo}`);
+        // console.log(`pressed: ${combo}`);

         if (actionsByKeys[combo]) {
         if (actionsByKeys[combo]) {

-            const handled = actionsByKeys[combo](editor);
+            const handled = actionsByKeys[combo](context.editor, context);

             if (handled) {
                 event.stopPropagation();
                 event.preventDefault();
             if (handled) {
                 event.stopPropagation();
                 event.preventDefault();


@@ -78,11 +99,11 @@ function overrideDefaultCommands(editor: LexicalEditor) {
     }, COMMAND_PRIORITY_HIGH);
 }
 
     }, COMMAND_PRIORITY_HIGH);
 }
 

-export function registerShortcuts(editor: LexicalEditor) {
-    const listener = createKeyDownListener(editor);
-    overrideDefaultCommands(editor);
+export function registerShortcuts(context: EditorUiContext) {
+    const listener = createKeyDownListener(context);
+    overrideDefaultCommands(context.editor);

 
 

-    return editor.registerRootListener((rootElement: null | HTMLElement, prevRootElement: null | HTMLElement) => {
+    return context.editor.registerRootListener((rootElement: null | HTMLElement, prevRootElement: null | HTMLElement) => {

         // add the listener to the current root element
         rootElement?.addEventListener('keydown', listener);
         // remove the listener from the old root element
         // add the listener to the current root element
         rootElement?.addEventListener('keydown', listener);
         // remove the listener from the old root element

diff --git a/resources/js/wysiwyg/todo.md b/resources/js/wysiwyg/todo.md
index 75263c927dcdc4a0102f6f61546c2d7a33cb169b..f05e79baa0f6541ae1da4fdc3b9e4df80e3c76ac 100644 (file)
--- a/resources/js/wysiwyg/todo.md
+++ b/resources/js/wysiwyg/todo.md
@@ -2,7 +2,7 @@
 
 ## In progress
 
 
 ## In progress
 

-- Keyboard shortcuts support
+// 

 
 ## Main Todo
 
 
 ## Main Todo
 


@@ -13,6 +13,7 @@
 - Media resize support (like images)
 - Table caption text support
 - Table Cut/Copy/Paste column
 - Media resize support (like images)
 - Table caption text support
 - Table Cut/Copy/Paste column

+- Mac: Shortcut support via command.

 
 ## Secondary Todo
 
 
 ## Secondary Todo
 

diff --git a/resources/js/wysiwyg/ui/defaults/buttons/lists.ts b/resources/js/wysiwyg/ui/defaults/buttons/lists.ts
index 10500eb671875c7611a6aa200d334a0193591aa6..edec3ea0076fdd806c7254be5dffbd519cdeb6c3 100644 (file)
--- a/resources/js/wysiwyg/ui/defaults/buttons/lists.ts
+++ b/resources/js/wysiwyg/ui/defaults/buttons/lists.ts
@@ -1,11 +1,12 @@
-import {$isListNode, insertList, ListNode, ListType, removeList} from "@lexical/list";
+import {$isListNode, ListNode, ListType} from "@lexical/list";

 import {EditorButtonDefinition} from "../../framework/buttons";
 import {EditorUiContext} from "../../framework/core";
 import {EditorButtonDefinition} from "../../framework/buttons";
 import {EditorUiContext} from "../../framework/core";

-import {$getSelection, BaseSelection, LexicalNode} from "lexical";
+import {BaseSelection, LexicalNode} from "lexical";

 import listBulletIcon from "@icons/editor/list-bullet.svg";
 import listNumberedIcon from "@icons/editor/list-numbered.svg";
 import listCheckIcon from "@icons/editor/list-check.svg";
 import {$selectionContainsNodeType} from "../../../utils/selection";
 import listBulletIcon from "@icons/editor/list-bullet.svg";
 import listNumberedIcon from "@icons/editor/list-numbered.svg";
 import listCheckIcon from "@icons/editor/list-check.svg";
 import {$selectionContainsNodeType} from "../../../utils/selection";

+import {toggleSelectionAsList} from "../../../utils/formats";

 
 
 function buildListButton(label: string, type: ListType, icon: string): EditorButtonDefinition {
 
 
 function buildListButton(label: string, type: ListType, icon: string): EditorButtonDefinition {


@@ -13,14 +14,7 @@ function buildListButton(label: string, type: ListType, icon: string): EditorBut
         label,
         icon,
         action(context: EditorUiContext) {
         label,
         icon,
         action(context: EditorUiContext) {

-            context.editor.getEditorState().read(() => {
-                const selection = $getSelection();
-                if (this.isActive(selection, context)) {
-                    removeList(context.editor);
-                } else {
-                    insertList(context.editor, type);
-                }
-            });
+            toggleSelectionAsList(context.editor, type);

         },
         isActive(selection: BaseSelection|null): boolean {
             return $selectionContainsNodeType(selection, (node: LexicalNode | null | undefined): boolean => {
         },
         isActive(selection: BaseSelection|null): boolean {
             return $selectionContainsNodeType(selection, (node: LexicalNode | null | undefined): boolean => {

diff --git a/resources/js/wysiwyg/ui/defaults/buttons/objects.ts b/resources/js/wysiwyg/ui/defaults/buttons/objects.ts
index 3494096a2c2230efe8e59eef1a429ed947a6dca7..46556d3d1368ab8745d22080caa136ec735872cc 100644 (file)
--- a/resources/js/wysiwyg/ui/defaults/buttons/objects.ts
+++ b/resources/js/wysiwyg/ui/defaults/buttons/objects.ts
@@ -2,11 +2,9 @@ import {EditorButtonDefinition} from "../../framework/buttons";
 import linkIcon from "@icons/editor/link.svg";
 import {EditorUiContext} from "../../framework/core";
 import {
 import linkIcon from "@icons/editor/link.svg";
 import {EditorUiContext} from "../../framework/core";
 import {

-    $createNodeSelection,

     $createTextNode,
     $getRoot,
     $getSelection, $insertNodes,
     $createTextNode,
     $getRoot,
     $getSelection, $insertNodes,

-    $setSelection,

     BaseSelection,
     ElementNode
 } from "lexical";
     BaseSelection,
     ElementNode
 } from "lexical";


@@ -17,7 +15,7 @@ import {$isImageNode, ImageNode} from "../../../nodes/image";
 import horizontalRuleIcon from "@icons/editor/horizontal-rule.svg";
 import {$createHorizontalRuleNode, $isHorizontalRuleNode} from "../../../nodes/horizontal-rule";
 import codeBlockIcon from "@icons/editor/code-block.svg";
 import horizontalRuleIcon from "@icons/editor/horizontal-rule.svg";
 import {$createHorizontalRuleNode, $isHorizontalRuleNode} from "../../../nodes/horizontal-rule";
 import codeBlockIcon from "@icons/editor/code-block.svg";

-import {$createCodeBlockNode, $isCodeBlockNode, $openCodeEditorForNode, CodeBlockNode} from "../../../nodes/code-block";
+import {$isCodeBlockNode} from "../../../nodes/code-block";

 import editIcon from "@icons/edit.svg";
 import diagramIcon from "@icons/editor/diagram.svg";
 import {$createDiagramNode, DiagramNode} from "../../../nodes/diagram";
 import editIcon from "@icons/edit.svg";
 import diagramIcon from "@icons/editor/diagram.svg";
 import {$createDiagramNode, DiagramNode} from "../../../nodes/diagram";


@@ -32,35 +30,16 @@ import {
 } from "../../../utils/selection";
 import {$isDiagramNode, $openDrawingEditorForNode, showDiagramManagerForInsert} from "../../../utils/diagrams";
 import {$createLinkedImageNodeFromImageData, showImageManager} from "../../../utils/images";
 } from "../../../utils/selection";
 import {$isDiagramNode, $openDrawingEditorForNode, showDiagramManagerForInsert} from "../../../utils/diagrams";
 import {$createLinkedImageNodeFromImageData, showImageManager} from "../../../utils/images";

-import {$showImageForm} from "../forms/objects";
+import {$showImageForm, $showLinkForm} from "../forms/objects";

 import {formatCodeBlock} from "../../../utils/formats";
 
 export const link: EditorButtonDefinition = {
     label: 'Insert/edit link',
     icon: linkIcon,
     action(context: EditorUiContext) {
 import {formatCodeBlock} from "../../../utils/formats";
 
 export const link: EditorButtonDefinition = {
     label: 'Insert/edit link',
     icon: linkIcon,
     action(context: EditorUiContext) {

-        const linkModal = context.manager.createModal('link');

         context.editor.getEditorState().read(() => {
         context.editor.getEditorState().read(() => {

-            const selection = $getSelection();
-            const selectedLink = $getNodeFromSelection(selection, $isLinkNode) as LinkNode | null;
-
-            let formDefaults = {};
-            if (selectedLink) {
-                formDefaults = {
-                    url: selectedLink.getURL(),
-                    text: selectedLink.getTextContent(),
-                    title: selectedLink.getTitle(),
-                    target: selectedLink.getTarget(),
-                }
-
-                context.editor.update(() => {
-                    const selection = $createNodeSelection();
-                    selection.add(selectedLink.getKey());
-                    $setSelection(selection);
-                });
-            }
-
-            linkModal.show(formDefaults);
+            const selectedLink = $getNodeFromSelection($getSelection(), $isLinkNode) as LinkNode | null;
+            $showLinkForm(selectedLink, context);

         });
     },
     isActive(selection: BaseSelection | null): boolean {
         });
     },
     isActive(selection: BaseSelection | null): boolean {

diff --git a/resources/js/wysiwyg/ui/defaults/forms/objects.ts b/resources/js/wysiwyg/ui/defaults/forms/objects.ts
index 2aefe54145023f9b2bd0bd429e8e58a034dabf94..714d5f64b916cd32301239c4304428f098735444 100644 (file)
--- a/resources/js/wysiwyg/ui/defaults/forms/objects.ts
+++ b/resources/js/wysiwyg/ui/defaults/forms/objects.ts
@@ -5,9 +5,9 @@ import {
     EditorSelectFormFieldDefinition
 } from "../../framework/forms";
 import {EditorUiContext} from "../../framework/core";
     EditorSelectFormFieldDefinition
 } from "../../framework/forms";
 import {EditorUiContext} from "../../framework/core";

-import {$createTextNode, $getSelection, $insertNodes} from "lexical";
+import {$createNodeSelection, $createTextNode, $getSelection, $insertNodes, $setSelection} from "lexical";

 import {$isImageNode, ImageNode} from "../../../nodes/image";
 import {$isImageNode, ImageNode} from "../../../nodes/image";

-import {$createLinkNode, $isLinkNode} from "@lexical/link";
+import {$createLinkNode, $isLinkNode, LinkNode} from "@lexical/link";

 import {$createMediaNodeFromHtml, $createMediaNodeFromSrc, $isMediaNode, MediaNode} from "../../../nodes/media";
 import {$insertNodeToNearestRoot} from "@lexical/utils";
 import {$getNodeFromSelection, getLastSelection} from "../../../utils/selection";
 import {$createMediaNodeFromHtml, $createMediaNodeFromSrc, $isMediaNode, MediaNode} from "../../../nodes/media";
 import {$insertNodeToNearestRoot} from "@lexical/utils";
 import {$getNodeFromSelection, getLastSelection} from "../../../utils/selection";


@@ -19,6 +19,7 @@ import searchImageIcon from "@icons/editor/image-search.svg";
 import searchIcon from "@icons/search.svg";
 import {showLinkSelector} from "../../../utils/links";
 import {LinkField} from "../../framework/blocks/link-field";
 import searchIcon from "@icons/search.svg";
 import {showLinkSelector} from "../../../utils/links";
 import {LinkField} from "../../framework/blocks/link-field";

+import {insertOrUpdateLink} from "../../../utils/formats";

 
 export function $showImageForm(image: ImageNode, context: EditorUiContext) {
     const imageModal: EditorFormModal = context.manager.createModal('image');
 
 export function $showImageForm(image: ImageNode, context: EditorUiContext) {
     const imageModal: EditorFormModal = context.manager.createModal('image');


@@ -96,37 +97,36 @@ export const image: EditorFormDefinition = {
     ],
 };
 
     ],
 };
 

-export const link: EditorFormDefinition = {
-    submitText: 'Apply',
-    async action(formData, context: EditorUiContext) {
-        context.editor.update(() => {
+export function $showLinkForm(link: LinkNode|null, context: EditorUiContext) {
+    const linkModal = context.manager.createModal('link');

 
 

-            const url = formData.get('url')?.toString() || '';
-            const title = formData.get('title')?.toString() || ''
-            const target = formData.get('target')?.toString() || '';
-            const text = formData.get('text')?.toString() || '';
+    let formDefaults = {};
+    if (link) {
+        formDefaults = {
+            url: link.getURL(),
+            text: link.getTextContent(),
+            title: link.getTitle(),
+            target: link.getTarget(),
+        }

 
 

-            const selection = $getSelection();
-            let link = $getNodeFromSelection(selection, $isLinkNode);
-            if ($isLinkNode(link)) {
-                link.setURL(url);
-                link.setTarget(target);
-                link.setTitle(title);
-            } else {
-                link = $createLinkNode(url, {
-                    title: title,
-                    target: target,
-                });
+        context.editor.update(() => {
+            const selection = $createNodeSelection();
+            selection.add(link.getKey());
+            $setSelection(selection);
+        });
+    }

 
 

-                $insertNodes([link]);
-            }
+    linkModal.show(formDefaults);
+}

 
 

-            if ($isLinkNode(link)) {
-                for (const child of link.getChildren()) {
-                    child.remove(true);
-                }
-                link.append($createTextNode(text));
-            }
+export const link: EditorFormDefinition = {
+    submitText: 'Apply',
+    async action(formData, context: EditorUiContext) {
+        insertOrUpdateLink(context.editor, {
+            url: formData.get('url')?.toString() || '',
+            title: formData.get('title')?.toString() || '',
+            target: formData.get('target')?.toString() || '',
+            text: formData.get('text')?.toString() || '',

         });
         return true;
     },
         });
         return true;
     },

diff --git a/resources/js/wysiwyg/utils/formats.ts b/resources/js/wysiwyg/utils/formats.ts
index 340be393da0ed7e9d4f140f0005a17bff7b39dff..97038f07bad2db1e82b0b7077e0f680197f731c5 100644 (file)
--- a/resources/js/wysiwyg/utils/formats.ts
+++ b/resources/js/wysiwyg/utils/formats.ts
@@ -1,9 +1,9 @@
 import {$isQuoteNode, HeadingNode, HeadingTagType} from "@lexical/rich-text";
 import {$isQuoteNode, HeadingNode, HeadingTagType} from "@lexical/rich-text";

-import {$getSelection, LexicalEditor, LexicalNode} from "lexical";
+import {$createTextNode, $getSelection, $insertNodes, LexicalEditor, LexicalNode} from "lexical";

 import {
     $getBlockElementNodesInSelection,
     $getNodeFromSelection,
 import {
     $getBlockElementNodesInSelection,
     $getNodeFromSelection,

-    $insertNewBlockNodeAtSelection,
+    $insertNewBlockNodeAtSelection, $selectionContainsNodeType,

     $toggleSelectionBlockNodeType,
     getLastSelection
 } from "./selection";
     $toggleSelectionBlockNodeType,
     getLastSelection
 } from "./selection";


@@ -12,6 +12,9 @@ import {$createCustomParagraphNode, $isCustomParagraphNode} from "../nodes/custo
 import {$createCustomQuoteNode} from "../nodes/custom-quote";
 import {$createCodeBlockNode, $isCodeBlockNode, $openCodeEditorForNode, CodeBlockNode} from "../nodes/code-block";
 import {$createCalloutNode, $isCalloutNode, CalloutCategory} from "../nodes/callout";
 import {$createCustomQuoteNode} from "../nodes/custom-quote";
 import {$createCodeBlockNode, $isCodeBlockNode, $openCodeEditorForNode, CodeBlockNode} from "../nodes/code-block";
 import {$createCalloutNode, $isCalloutNode, CalloutCategory} from "../nodes/callout";

+import {insertList, ListNode, ListType, removeList} from "@lexical/list";
+import {$isCustomListNode} from "../nodes/custom-list";
+import {$createLinkNode, $isLinkNode} from "@lexical/link";

 
 const $isHeaderNodeOfTag = (node: LexicalNode | null | undefined, tag: HeadingTagType) => {
     return $isCustomHeadingNode(node) && (node as HeadingNode).getTag() === tag;
 
 const $isHeaderNodeOfTag = (node: LexicalNode | null | undefined, tag: HeadingTagType) => {
     return $isCustomHeadingNode(node) && (node as HeadingNode).getTag() === tag;


@@ -38,6 +41,21 @@ export function toggleSelectionAsBlockquote(editor: LexicalEditor) {
     });
 }
 
     });
 }
 

+export function toggleSelectionAsList(editor: LexicalEditor, type: ListType) {
+    editor.getEditorState().read(() => {
+        const selection = $getSelection();
+        const listSelected = $selectionContainsNodeType(selection, (node: LexicalNode | null | undefined): boolean => {
+            return $isCustomListNode(node) && (node as ListNode).getListType() === type;
+        });
+
+        if (listSelected) {
+            removeList(editor);
+        } else {
+            insertList(editor, type);
+        }
+    });
+}
+

 export function formatCodeBlock(editor: LexicalEditor) {
     editor.getEditorState().read(() => {
         const selection = $getSelection();
 export function formatCodeBlock(editor: LexicalEditor) {
     editor.getEditorState().read(() => {
         const selection = $getSelection();


@@ -85,4 +103,30 @@ export function cycleSelectionCalloutFormats(editor: LexicalEditor) {
             }
         }
     });
             }
         }
     });

+}
+
+export function insertOrUpdateLink(editor: LexicalEditor, linkDetails: {text: string, title: string, target: string, url: string}) {
+    editor.update(() => {
+        const selection = $getSelection();
+        let link = $getNodeFromSelection(selection, $isLinkNode);
+        if ($isLinkNode(link)) {
+            link.setURL(linkDetails.url);
+            link.setTarget(linkDetails.target);
+            link.setTitle(linkDetails.title);
+        } else {
+            link = $createLinkNode(linkDetails.url, {
+                title: linkDetails.title,
+                target: linkDetails.target,
+            });
+
+            $insertNodes([link]);
+        }
+
+        if ($isLinkNode(link)) {
+            for (const child of link.getChildren()) {
+                child.remove(true);
+            }
+            link.append($createTextNode(linkDetails.text));
+        }
+    });

 }
\ No newline at end of file
 }
\ No newline at end of file