Update Test & linting packages

package.json

@@ -22,7 +22,7 @@
     "main": "git checkout main && git pull ${GHOST_UPSTREAM:-origin} main && yarn"
   },
   "devDependencies": {
-    "eslint": "8.40.0",
+    "eslint": "8.46.0",
     "eslint-plugin-ghost": "3.3.0",
     "husky": "8.0.3",
     "lerna": "7.1.5",

packages/html-to-mobiledoc/package.json

@@ -18,7 +18,7 @@
     "c8": "8.0.1",
     "mocha": "10.2.0",
     "should": "13.2.3",
-    "sinon": "15.0.4"
+    "sinon": "15.2.0"
   },
   "dependencies": {
     "@tryghost/kg-parser-plugins": "^3.0.25",

packages/kg-card-factory/package.json

@@ -26,6 +26,6 @@
     "mocha": "10.2.0",
     "should": "13.2.3",
     "simple-dom": "1.4.0",
-    "sinon": "15.0.4"
+    "sinon": "15.2.0"
   }
 }

packages/kg-clean-basic-html/package.json

@@ -38,6 +38,6 @@
     "mocha": "10.2.0",
     "rollup": "2.79.1",
     "should": "13.2.3",
-    "sinon": "15.0.4"
+    "sinon": "15.2.0"
   }
 }

packages/kg-converters/package.json

@@ -34,7 +34,7 @@
     "c8": "8.0.1",
     "mocha": "10.2.0",
     "rollup": "2.79.1",
-    "sinon": "15.0.4"
+    "sinon": "15.2.0"
   },
   "dependencies": {
     "lodash": "^4.17.21"

packages/kg-default-cards/package.json

@@ -27,7 +27,7 @@
     "mocha": "10.2.0",
     "should": "13.2.3",
     "simple-dom": "1.4.0",
-    "sinon": "15.0.4"
+    "sinon": "15.2.0"
   },
   "dependencies": {
     "@tryghost/kg-markdown-html-renderer": "^6.0.9",

packages/kg-default-nodes/package.json

@@ -41,7 +41,7 @@
     "prettier": "^3.0.1",
     "rollup": "2.79.1",
     "should": "13.2.3",
-    "sinon": "15.0.4"
+    "sinon": "15.2.0"
   },
   "dependencies": {
     "@tryghost/kg-clean-basic-html": "^3.0.24",

packages/kg-lexical-html-renderer/package.json

@@ -24,7 +24,7 @@
     "jsdom": "^22.1.0",
     "mocha": "10.2.0",
     "should": "13.2.3",
-    "sinon": "15.0.4"
+    "sinon": "15.2.0"
   },
   "dependencies": {
     "@lexical/clipboard": "^0.11.0",

packages/kg-markdown-html-renderer/package.json

@@ -25,7 +25,7 @@
     "c8": "8.0.1",
     "mocha": "10.2.0",
     "should": "13.2.3",
-    "sinon": "15.0.4"
+    "sinon": "15.2.0"
   },
   "dependencies": {
     "@tryghost/kg-utils": "^1.0.17",

packages/kg-parser-plugins/package.json

@@ -39,7 +39,7 @@
     "mocha": "10.2.0",
     "rollup": "2.79.1",
     "should": "13.2.3",
-    "sinon": "15.0.4"
+    "sinon": "15.2.0"
   },
   "dependencies": {
     "@tryghost/kg-clean-basic-html": "^3.0.24"

packages/kg-simplemde/package.json

@@ -26,7 +26,7 @@
   "devDependencies": {
     "browserify": "17.0.0",
     "debug": "*",
-    "eslint": "8.40.0",
+    "eslint": "8.46.0",
     "gulp": "*",
     "gulp-clean-css": "4.3.0",
     "gulp-concat": "*",

packages/kg-utils/package.json

@@ -22,7 +22,7 @@
     "c8": "8.0.1",
     "mocha": "10.2.0",
     "should": "13.2.3",
-    "sinon": "15.0.4"
+    "sinon": "15.2.0"
   },
   "dependencies": {
     "semver": "^7.3.5"

packages/koenig-lexical/.eslintrc.cjs

@@ -47,4 +47,4 @@ module.exports = {
             'react/prop-types': 2
         }
     }]
-};
+};

packages/koenig-lexical/demo/DemoApp.jsx

@@ -240,7 +240,7 @@ function DemoComposer({editorType, isMultiplayer, setWordCount}) {
                 }
                 <DarkModeToggle darkMode={darkMode} toggleDarkMode={toggleDarkMode} />
                 <div ref={containerRef} className="h-full overflow-auto overflow-x-hidden" onClick={focusEditor}>
-                    <div className="mx-auto max-w-[740px] py-[15vmin] px-6 lg:px-0">
+                    <div className="mx-auto max-w-[740px] px-6 py-[15vmin] lg:px-0">
                         {showTitle
                             ? <TitleTextBox ref={titleRef} editorAPI={editorAPI} setTitle={setTitle} title={title} />
                             : null

packages/koenig-lexical/demo/HtmlOutputDemo.jsx

@@ -89,7 +89,7 @@ function HtmlOutputDemo() {
                 >
                     <div className="relative h-full grow">
                         <div ref={containerRef} className="h-full overflow-auto" onClick={focusEditor}>
-                            <div className="mx-auto max-w-[740px] py-[15vmin] px-6 lg:px-0">
+                            <div className="mx-auto max-w-[740px] px-6 py-[15vmin] lg:px-0">
                                 <KoenigComposableEditor
                                     cursorDidExitAtTop={focusTitle}
                                     registerAPI={setEditorAPI}

packages/koenig-lexical/demo/RestrictedContentDemo.jsx

@@ -95,7 +95,7 @@ function RestrictedContentDemo() {
             >
                 <div className="relative h-full grow">
                     <div ref={containerRef} className="h-full overflow-auto" onClick={focusEditor}>
-                        <div className="mx-auto max-w-[740px] py-[15vmin] px-6 lg:px-0">
+                        <div className="mx-auto max-w-[740px] px-6 py-[15vmin] lg:px-0">
                             <KoenigComposableEditor
                                 cursorDidExitAtTop={focusTitle}
                                 registerAPI={setEditorAPI}

packages/koenig-lexical/demo/components/FloatingButton.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 const FloatingButton = ({isOpen, ...props}) => {
     return (
-        <div className={`fixed bottom-4 right-6 z-20 rounded py-1 px-2 font-mono text-sm tracking-tight text-grey-600 transition-all duration-200 ease-in-out ${isOpen ? 'bg-transparent' : 'bg-white'}`}>
+        <div className={`fixed bottom-4 right-6 z-20 rounded px-2 py-1 font-mono text-sm tracking-tight text-grey-600 transition-all duration-200 ease-in-out ${isOpen ? 'bg-transparent' : 'bg-white'}`}>
             <button className="cursor-pointer" type="button" onClick={() => props.onClick('json')}>
                 JSON output
             </button>

packages/koenig-lexical/demo/components/InitialContentToggle.jsx

@@ -33,9 +33,9 @@ const InitialContentToggle = ({defaultContent, setTitle, searchParams, setSearch
 
     return (
         <>
-            <button className="absolute top-4 right-6 z-20 block h-[22px] w-[42px] cursor-pointer rounded-full bg-black transition-all ease-in-out" type="button" onClick={toggle}>
-                <EyeOpenIcon className="absolute top-[5px] left-[6px] h-3 w-3 text-white" />
-                <EyeClosedIcon className="absolute top-[5px] right-[6px] h-3 w-3 text-white" />
+            <button className="absolute right-6 top-4 z-20 block h-[22px] w-[42px] cursor-pointer rounded-full bg-black transition-all ease-in-out" type="button" onClick={toggle}>
+                <EyeOpenIcon className="absolute left-[6px] top-[5px] h-3 w-3 text-white" />
+                <EyeClosedIcon className="absolute right-[6px] top-[5px] h-3 w-3 text-white" />
                 <div className={`absolute top-[2px] h-[18px] w-[18px] rounded-full bg-white transition-all ease-in-out ${isOn ? 'left-[22px]' : 'left-[2px]'}`}></div>
             </button>
         </>

packages/koenig-lexical/demo/components/Watermark.jsx

@@ -13,7 +13,7 @@ function EditorLink({editorType}) {
 const Watermark = ({editorType}) => {
     if (!editorType) {
         return (
-            <a className="absolute bottom-4 left-6 z-20 flex items-center rounded bg-white py-1 pr-2 pl-1 font-mono text-sm tracking-tight text-black" href="https://github.com/TryGhost/Koenig/tree/main/packages/koenig-lexical" rel="nofollow ugc noopener noreferrer" target="_blank">
+            <a className="absolute bottom-4 left-6 z-20 flex items-center rounded bg-white py-1 pl-1 pr-2 font-mono text-sm tracking-tight text-black" href="https://github.com/TryGhost/Koenig/tree/main/packages/koenig-lexical" rel="nofollow ugc noopener noreferrer" target="_blank">
                 <GhostFavicon className="mr-2 h-6 w-6" />
                 <span className="pr-1 font-bold tracking-wide">Koenig</span>
             editor
@@ -40,7 +40,7 @@ const Watermark = ({editorType}) => {
 
     return (
         <>
-            <div className="group absolute bottom-4 left-6 z-20 flex items-center rounded bg-white py-1 pr-2 pl-1 font-mono text-sm tracking-tight text-black">
+            <div className="group absolute bottom-4 left-6 z-20 flex items-center rounded bg-white py-1 pl-1 pr-2 font-mono text-sm tracking-tight text-black">
                 <GhostFavicon className="mr-2 h-6 w-6" />
                 <span className="pr-1 font-bold tracking-wide">Koenig</span>
                 <span className="group-hover:font-bold">{editorType}

packages/koenig-lexical/demo/components/WordCount.jsx

@@ -1,6 +1,6 @@
 const WordCount = ({wordCount}) => {
     return (
-        <div className="absolute top-4 left-6 z-20 block cursor-pointer rounded bg-white py-1 px-2 font-mono text-sm tracking-tight text-grey-600 dark:bg-transparent">
+        <div className="absolute left-6 top-4 z-20 block cursor-pointer rounded bg-white px-2 py-1 font-mono text-sm tracking-tight text-grey-600 dark:bg-transparent">
             <span data-testid="word-count">{wordCount}</span> words
         </div>
     );

packages/koenig-lexical/package.json

@@ -96,7 +96,7 @@
     "@storybook/react-vite": "7.2.2",
     "@storybook/test-runner": "^0.13.0",
     "@tailwindcss/line-clamp": "0.4.4",
-    "@testing-library/jest-dom": "5.16.5",
+    "@testing-library/jest-dom": "5.17.0",
     "@testing-library/react": "14.0.0",
     "@types/react": "18.2.20",
     "@types/react-dom": "18.2.7",
@@ -108,10 +108,10 @@
     "concurrently": "^8.0.0",
     "cross-fetch": "^4.0.0",
     "eslint-config-react-app": "7.0.1",
-    "eslint-plugin-jest": "27.2.1",
+    "eslint-plugin-jest": "27.2.3",
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-storybook": "^0.6.12",
-    "eslint-plugin-tailwindcss": "3.11.0",
+    "eslint-plugin-tailwindcss": "3.13.0",
     "jsdom": "22.1.0",
     "postcss": "8.4.27",
     "postcss-import": "15.1.0",
@@ -120,7 +120,7 @@
     "react-router-dom": "6.14.2",
     "storybook": "^7.0.12",
     "stylelint": "^15.6.1",
-    "tailwindcss": "3.2.7",
+    "tailwindcss": "3.3.3",
     "typescript": "5.1.6",
     "vite": "4.3.8",
     "vite-plugin-svgr": "^3.2.0",

packages/koenig-lexical/src/components/KoenigCaptionEditor.jsx

@@ -7,7 +7,7 @@ import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
 
 const Placeholder = ({text = 'Type here'}) => {
     return (
-        <div className="pointer-events-none absolute top-0 left-0 !m-0 min-w-full cursor-text font-sans text-sm font-normal tracking-wide text-grey-500 dark:text-grey-800">
+        <div className="pointer-events-none absolute left-0 top-0 !m-0 min-w-full cursor-text font-sans text-sm font-normal tracking-wide text-grey-500 dark:text-grey-800">
             {text}
         </div>
     );

packages/koenig-lexical/src/components/KoenigNestedEditor.jsx

@@ -6,7 +6,7 @@ const Placeholder = ({text = 'Type here', className = ''}) => {
     // Note: we use line-clamp-1, instead of truncate because truncate adds 'white-space: nowrap', which often breaks overflows of parents in some cards
     return (
         <div className={`placeholder not-kg-prose pointer-events-none h-0 cursor-text overflow-visible`}>
-            <div className={`translate-y-[-100%] line-clamp-1 ${className}`}>{text}</div>
+            <div className={`line-clamp-1 translate-y-[-100%] ${className}`}>{text}</div>
         </div>
     );
 };

packages/koenig-lexical/src/components/ui/ActionToolbar.jsx

@@ -6,7 +6,7 @@ export function ActionToolbar({isVisible, children, ...props}) {
 
     if (isVisible && !isDragging) {
         return (
-            <div className="not-kg-prose absolute top-[-44px] left-1/2 z-[1000] -translate-x-1/2" {...props}>
+            <div className="not-kg-prose absolute left-1/2 top-[-44px] z-[1000] -translate-x-1/2" {...props}>
                 {children}
             </div>
         );

packages/koenig-lexical/src/components/ui/BackgroundImagePicker.jsx

@@ -55,7 +55,7 @@ export function BackgroundImagePicker({onFileChange,
                                             <div className="group relative mb-4 w-full rounded">
                                                 <div className="absolute inset-0 rounded bg-gradient-to-t from-black/0 via-black/5 to-black/30 opacity-0 transition-all group-hover:opacity-100">
                                                 </div>
-                                                <div className="absolute top-5 right-5 flex opacity-0 transition-all group-hover:opacity-100">
+                                                <div className="absolute right-5 top-5 flex opacity-0 transition-all group-hover:opacity-100">
                                                     <button className="pointer-events-auto flex h-8 w-9 cursor-pointer items-center justify-center rounded bg-white/90 transition-all hover:bg-white" type="button" onClick={handleClearBackgroundImage}>
                                                         <TrashIcon className="h-5 w-5 fill-grey-900 stroke-[3px] transition-all ease-linear group-hover:scale-105" />
                                                     </button>

packages/koenig-lexical/src/components/ui/ColorPicker.jsx

@@ -159,7 +159,7 @@ export function ColorIndicator({value, swatches, onSwatchChange, onTogglePicker,
                 <div className='absolute inset-0 rounded-full bg-[conic-gradient(hsl(360,100%,50%),hsl(315,100%,50%),hsl(270,100%,50%),hsl(225,100%,50%),hsl(180,100%,50%),hsl(135,100%,50%),hsl(90,100%,50%),hsl(45,100%,50%),hsl(0,100%,50%))]' />
                 {value && !selectedSwatch && (
                     <div className="absolute inset-[3px] overflow-hidden rounded-full border border-white dark:border-grey-950" style={{backgroundColor}}>
-                        {value === 'transparent' && <div className="absolute top-[3px] left-[3px] z-10 w-[136%] origin-left rotate-45 border-b border-b-red" />}
+                        {value === 'transparent' && <div className="absolute left-[3px] top-[3px] z-10 w-[136%] origin-left rotate-45 border-b border-b-red" />}
                     </div>
                 )}
             </button>

packages/koenig-lexical/src/components/ui/Dropdown.jsx

@@ -63,7 +63,7 @@ export function Dropdown({value, menu, onChange}) {
 
     return (
         <div className="relative z-0 font-sans text-sm font-normal">
-            <button className={`relative w-full cursor-pointer border border-grey-300 py-2 px-3 text-left font-sans font-normal text-grey-900 focus-visible:outline-none dark:border-grey-900 dark:bg-grey-900 dark:text-white dark:placeholder:text-grey-800 ${open ? 'rounded-t' : 'rounded'}`} type="button" onBlur={handleBlur} onClick={handleOpen} onMouseDownCapture={preventLoseFocus}>
+            <button className={`relative w-full cursor-pointer border border-grey-300 px-3 py-2 text-left font-sans font-normal text-grey-900 focus-visible:outline-none dark:border-grey-900 dark:bg-grey-900 dark:text-white dark:placeholder:text-grey-800 ${open ? 'rounded-t' : 'rounded'}`} type="button" onBlur={handleBlur} onClick={handleOpen} onMouseDownCapture={preventLoseFocus}>
                 {trigger}
                 <ArrowIcon className={`absolute right-2 top-4 h-2 w-2 text-grey-600 ${open && 'rotate-180'}`} />
             </button>

packages/koenig-lexical/src/components/ui/EditorPlaceholder.jsx

@@ -1,7 +1,7 @@
 export function EditorPlaceholder({className, text}) {
     return (
         <div
-            className={`pointer-events-none absolute top-0 left-0 min-w-full cursor-text font-serif text-xl text-grey-500 dark:text-grey-800 ${className}`}
+            className={`pointer-events-none absolute left-0 top-0 min-w-full cursor-text font-serif text-xl text-grey-500 dark:text-grey-800 ${className}`}
         >{text || 'Begin writing your post...'}</div>
     );
 }

packages/koenig-lexical/src/components/ui/InputList.jsx

@@ -21,7 +21,7 @@ function Item({dataTestId, item, selected, onChange}) {
     return (
         <li className={`${selectionClass} cursor-pointer px-4 py-2 text-left hover:bg-grey-100 dark:hover:bg-black`} data-testid={`${dataTestId}-listOption`} onMouseDownCapture={event => handleOptionMouseDown(event, item.value)}>
             <span className="block text-sm font-semibold leading-tight text-black dark:text-white" data-testid={`${dataTestId}-listOption-${item.label}`}>{item.label}</span>
-            <span className="block overflow-hidden text-ellipsis whitespace-nowrap text-xs leading-tight text-grey-700 dark:text-grey-600" data-testid={`${dataTestId}-listOption-${item.value}`}>
+            <span className="block truncate text-xs leading-tight text-grey-700 dark:text-grey-600" data-testid={`${dataTestId}-listOption-${item.value}`}>
                 {item.value}
             </span>
         </li>

packages/koenig-lexical/src/components/ui/LinkInput.jsx

@@ -49,7 +49,7 @@ export function LinkInput({href, update, cancel, arrowStyles}) {
     }, [onEscape]);
 
     return (
-        <div ref={containerRef} className="relative m-0 flex h-[36px] min-w-[240px] items-center justify-evenly rounded bg-black py-0 px-1 font-sans text-sm font-medium dark:bg-grey-950">
+        <div ref={containerRef} className="relative m-0 flex h-[36px] min-w-[240px] items-center justify-evenly rounded bg-black px-1 py-0 font-sans text-sm font-medium dark:bg-grey-950">
             <input
                 ref={inputRef}
                 className="mb-[1px] h-auto w-full rounded bg-black pl-3 pr-9 leading-loose text-white selection:bg-grey/40 dark:bg-grey-950"
@@ -84,7 +84,7 @@ export function LinkInput({href, update, cancel, arrowStyles}) {
             {/* Arrow block. Used div instead of pseudo-element. Arrow requires dynamic values for position,
              and Tailwind can't handle this. They recommended CSS-in-JS or style attr for such cases (https://v2.tailwindcss.com/docs/just-in-time-mode) */}
             <div
-                className="absolute top-[36px] left-[calc(50%-8px)] w-0 border-x-8 border-t-8 border-x-transparent border-t-black dark:border-t-grey-950"
+                className="absolute left-[calc(50%-8px)] top-[36px] w-0 border-x-8 border-t-8 border-x-transparent border-t-black dark:border-t-grey-950"
                 style={arrowStyles}
             ></div>
         </div>

packages/koenig-lexical/src/components/ui/MediaPlayer.jsx

@@ -15,7 +15,7 @@ export function MediaPlayer({type, duration, theme, ...args}) {
             <div className={`relative mx-2 h-1 grow rounded ${theme === 'light' ? 'bg-white/40' : 'bg-grey/30'}`}>
                 <button className="absolute left-0 top-[-6px] h-4 w-4 rounded-full border border-grey/50 bg-white shadow" type="button"></button>
             </div>
-            <button className={`mr-4 mb-[1px] px-1 font-sans text-sm font-medium ${theme === 'light' ? 'text-white' : 'text-black'}`} type="button">1&#215;</button>
+            <button className={`mb-[1px] mr-4 px-1 font-sans text-sm font-medium ${theme === 'light' ? 'text-white' : 'text-black'}`} type="button">1&#215;</button>
             <button type="button">
                 <UnmuteIcon className={`${theme === 'light' ? 'fill-white' : 'fill-black'}`} />
             </button>

packages/koenig-lexical/src/components/ui/MediaUploader.jsx

@@ -85,7 +85,7 @@ export function MediaUploader({
             )}
 
             {!isLoading && (
-                <div className="absolute top-2 right-2 flex space-x-2 opacity-0 transition-all group-hover:opacity-100">
+                <div className="absolute right-2 top-2 flex space-x-2 opacity-0 transition-all group-hover:opacity-100">
                     {additionalActions}
                     { isPinturaEnabled && <IconButton Icon={EditIcon} onClick={() => openImageEditor({
                         image: src,

packages/koenig-lexical/src/components/ui/Modal.jsx

@@ -20,14 +20,14 @@ export function Modal({isOpen, onClose, children}) {
     return (
         <Portal>
             <div
-                className="fixed top-0 left-0 z-40 flex h-full w-full items-start justify-center overflow-auto"
+                className="fixed left-0 top-0 z-40 flex h-full w-full items-start justify-center overflow-auto"
                 role="dialog"
                 aria-modal
                 onKeyDown={controlByKeys}
             >
                 <div className="fixed inset-0 z-40 h-[100vh] bg-black opacity-60" onClick={onClose}></div>
                 <div className="relative z-50 my-8 w-full max-w-[550px] rounded bg-white drop-shadow-2xl">
-                    <button aria-label="Close dialog" className="absolute top-6 right-6 cursor-pointer" type="button" autoFocus>
+                    <button aria-label="Close dialog" className="absolute right-6 top-6 cursor-pointer" type="button" autoFocus>
                         <CloseIcon className="h-4 w-4 stroke-2 text-grey-400" onClick={onClose}/>
                     </button>
                     {children}

packages/koenig-lexical/src/components/ui/PlusMenu.jsx

@@ -2,7 +2,7 @@ import {ReactComponent as PlusIcon} from '../../assets/icons/plus.svg';
 
 export function PlusButton({onClick}) {
     return (
-        <div className="absolute top-[-2px] left-[-32px] xs:left-[-66px]" data-kg-plus-button>
+        <div className="absolute left-[-32px] top-[-2px] xs:left-[-66px]" data-kg-plus-button>
             <button
                 aria-label="Add a card"
                 className="group relative flex h-7 w-7 cursor-pointer items-center justify-center rounded-full border border-grey transition-all ease-linear hover:border-grey-900 dark:border-grey-800 dark:hover:border-grey-100 md:h-9 md:w-9"