mobile: release v3.3.6

.github/workflows/android.publish.internal.yml

@@ -75,7 +75,6 @@ jobs:
 
       - name: Check for typescript errors
         run: |
-          npm run tx mobile:build
           cd apps/mobile
           npx tsc --noEmit
 

.github/workflows/android.publish.yml

@@ -75,7 +75,6 @@ jobs:
 
       - name: Check for typescript errors
         run: |
-          npm run tx mobile:build
           cd apps/mobile
           npx tsc --noEmit
 

.github/workflows/ios.publish.yml

@@ -66,7 +66,6 @@ jobs:
 
       - name: Check for typescript errors
         run: |
-          npm run tx mobile:build
           cd apps/mobile
           npx tsc --noEmit
 

apps/desktop/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@notesnook/desktop",
-  "version": "3.3.5",
+  "version": "3.3.2",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@notesnook/desktop",
-      "version": "3.3.5",
+      "version": "3.3.2",
       "hasInstallScript": true,
       "license": "GPL-3.0-or-later",
       "dependencies": {

apps/desktop/package.json

@@ -2,7 +2,7 @@
   "name": "@notesnook/desktop",
   "productName": "Notesnook",
   "description": "Your private note taking space",
-  "version": "3.3.5",
+  "version": "3.3.2",
   "appAppleId": "1544027013",
   "private": true,
   "main": "./dist/cjs/index.js",

apps/desktop/src/main.ts

@@ -18,7 +18,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
 import "./overrides";
-import { app, BrowserWindow, nativeTheme, shell, dialog } from "electron";
+import { app, BrowserWindow, nativeTheme, shell } from "electron";
 import { isDevelopment } from "./utils";
 import { registerProtocol, PROTOCOL_URL } from "./utils/protocol";
 import { configureAutoUpdater } from "./utils/autoupdater";
@@ -182,17 +182,6 @@ async function createWindow() {
 app.once("ready", async () => {
   console.info("App ready. Opening window.");
 
-  if (app.runningUnderARM64Translation) {
-    console.log("App is running under ARM64 translation");
-    dialog.showMessageBoxSync({
-      message:
-        "Notesnook detected that it is running under ARM64 translation. For the best performance, please download the ARM64 build of Notesnook from our website.",
-      type: "warning",
-      buttons: ["Okay"],
-      title: "Degraded Performance Warning"
-    });
-  }
-
   if (config.customDns) enableCustomDns();
   else disableCustomDns();
 

apps/mobile/app/components/sheets/export-notes/index.tsx

@@ -39,7 +39,9 @@ import {
   presentSheet
 } from "../../../services/event-manager";
 import Exporter from "../../../services/exporter";
+import PremiumService from "../../../services/premium";
 import { useSettingStore } from "../../../stores/use-setting-store";
+import { useUserStore } from "../../../stores/use-user-store";
 import { getElevationStyle } from "../../../utils/elevation";
 import { AppFontSize, defaultBorderRadius } from "../../../utils/size";
 import { DefaultAppStyles } from "../../../utils/styles";
@@ -81,6 +83,7 @@ const ExportNotesSheet = ({
     type: "pdf" | "txt" | "md" | "html" | "md-frontmatter"
   ) => {
     if (exporting) return;
+    if (!PremiumService.get() && type !== "txt") return;
     setExporting(true);
     update?.({ disableClosing: true } as PresentSheetOptions);
     setComplete(false);
@@ -142,7 +145,8 @@ const ExportNotesSheet = ({
         await exportNoteAs("txt");
       },
       icon: "card-text",
-      id: notesnook.ids.dialogs.export.text
+      id: notesnook.ids.dialogs.export.text,
+      pro: true
     },
     {
       title: "HTML",
@@ -190,7 +194,8 @@ const ExportNotesSheet = ({
                   paddingVertical: DefaultAppStyles.GAP_VERTICAL,
                   justifyContent: "flex-start",
                   borderRadius: 0,
-                  paddingHorizontal: DefaultAppStyles.GAP
+                  paddingHorizontal: DefaultAppStyles.GAP,
+                  opacity: item.pro ? 1 : 0.5
                 }}
               >
                 <View

apps/mobile/app/screens/editor/tiptap/types.ts

@@ -59,7 +59,6 @@ export type Settings = {
   fontScale: number;
   markdownShortcuts: boolean;
   features: Record<any, any>;
-  loggedIn: boolean;
 };
 
 export type EditorProps = {

apps/mobile/app/screens/editor/tiptap/use-editor-events.tsx

@@ -165,7 +165,6 @@ export const useEditorEvents = (
     state.timeFormat
   ]);
   const handleBack = useRef<NativeEventSubscription>();
-  const loggedIn = useUserStore((state) => !!state.user);
   const { fontScale } = useWindowDimensions();
 
   const doubleSpacedLines = useSettingStore(
@@ -225,8 +224,7 @@ export const useEditorEvents = (
       timeFormat: db.settings?.getTimeFormat(),
       fontScale,
       markdownShortcuts,
-      features,
-      loggedIn
+      features
     });
   }, [
     fullscreen,
@@ -244,8 +242,7 @@ export const useEditorEvents = (
     timeFormat,
     loading,
     fontScale,
-    markdownShortcuts,
-    loggedIn
+    markdownShortcuts
   ]);
 
   const onBackPress = useCallback(async () => {
@@ -559,17 +556,9 @@ export const useEditorEvents = (
           if (editor.state.current?.isFocused) {
             editor.state.current.isFocused = true;
           }
-          if (editorMessage.value.feature === "insertAttachment") {
-            ToastManager.show({
-              type: "info",
-              message: strings.loginRequired()
-            });
-          } else {
-            PaywallSheet.present(
-              await isFeatureAvailable(editorMessage.value.feature)
-            );
-          }
-
+          PaywallSheet.present(
+            await isFeatureAvailable(editorMessage.value.feature)
+          );
           break;
         case EditorEvents.monograph:
           publishNote();

apps/mobile/app/screens/search/search-bar.tsx

@@ -19,7 +19,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import { strings } from "@notesnook/intl";
 import { useThemeColors } from "@notesnook/theme";
-import React, { useRef, useState } from "react";
+import React, { useRef } from "react";
 import { View } from "react-native";
 import { TextInput } from "react-native-gesture-handler";
 import { IconButton } from "../../components/ui/icon-button";
@@ -36,7 +36,6 @@ export const SearchBar = ({
   onChangeText: (value: string) => void;
   loading?: boolean;
 }) => {
-  const [clearButton, setClearButton] = useState(false);
   const selectionMode = useSelectionStore((state) => state.selectionMode);
   const isFocused = useNavigationStore(
     (state) => state.focusedRouteId === "Search"
@@ -46,7 +45,6 @@ export const SearchBar = ({
   const inputRef = useRef<TextInput>(null);
   const _onChangeText = (value: string) => {
     onChangeText(value);
-    setClearButton(!!value);
   };
 
   return selectionMode && isFocused ? null : (
@@ -102,23 +100,6 @@ export const SearchBar = ({
           autoCorrect={false}
           placeholderTextColor={colors.primary.placeholder}
         />
-
-        {clearButton ? (
-          <IconButton
-            name="close"
-            size={AppFontSize.xxl}
-            top={10}
-            testID="clear-search"
-            bottom={10}
-            onPress={() => {
-              inputRef.current?.clear();
-              onChangeText("");
-              setClearButton(false);
-            }}
-            color={colors.primary.paragraph}
-            type="plain"
-          />
-        ) : null}
       </View>
     </View>
   );

apps/mobile/app/screens/settings/notesnook-circle.tsx

@@ -23,8 +23,6 @@ import PremiumService from "../../services/premium";
 import { useUserStore } from "../../stores/use-user-store";
 import { AppFontSize, defaultBorderRadius } from "../../utils/size";
 import { DefaultAppStyles } from "../../utils/styles";
-import { openLinkInBrowser } from "../../utils/functions";
-import { Pressable } from "../../components/ui/pressable";
 
 export const NotesnookCircle = () => {
   const user = useUserStore((state) => state.user);
@@ -158,53 +156,32 @@ const Partner = ({
               }}
             />
           ) : (
-            <>
-              <TouchableOpacity
-                style={{
-                  backgroundColor: colors.secondary.background,
-                  borderRadius: defaultBorderRadius,
-                  alignItems: "center",
-                  justifyContent: "center",
-                  padding: DefaultAppStyles.GAP_SMALL,
-                  borderWidth: 0.5,
-                  borderColor: colors.secondary.border,
-                  flexDirection: "row",
-                  gap: DefaultAppStyles.GAP_SMALL
-                }}
-                activeOpacity={0.9}
-                onPress={() => {
-                  Clipboard.setString(code);
-                }}
+            <TouchableOpacity
+              style={{
+                backgroundColor: colors.secondary.background,
+                borderRadius: defaultBorderRadius,
+                alignItems: "center",
+                justifyContent: "center",
+                padding: DefaultAppStyles.GAP_SMALL,
+                borderWidth: 0.5,
+                borderColor: colors.secondary.border,
+                flexDirection: "row",
+                gap: DefaultAppStyles.GAP_SMALL
+              }}
+              activeOpacity={0.9}
+              onPress={() => {
+                Clipboard.setString(code);
+              }}
+            >
+              <Paragraph
+                size={AppFontSize.lg}
+                color={colors.secondary.paragraph}
               >
-                <Paragraph
-                  size={AppFontSize.lg}
-                  color={colors.secondary.paragraph}
-                >
-                  {code}
-                </Paragraph>
+                {code}
+              </Paragraph>
 
-                <AppIcon name="content-copy" />
-              </TouchableOpacity>
-
-              {item.codeRedeemUrl ? (
-                <Pressable
-                  onPress={() => {
-                    if (item.codeRedeemUrl) {
-                      openLinkInBrowser(
-                        item.codeRedeemUrl.replace("{{code}}", code)
-                      );
-                    }
-                  }}
-                >
-                  <Paragraph
-                    color={colors.secondary.paragraph}
-                    size={AppFontSize.xxs}
-                  >
-                    {strings.clickToDirectlyClaimPromo()}
-                  </Paragraph>
-                </Pressable>
-              ) : null}
-            </>
+              <AppIcon name="content-copy" />
+            </TouchableOpacity>
           )}
         </>
       ) : null}

apps/mobile/app/screens/settings/restore-backup/index.tsx

@@ -322,7 +322,6 @@ export const RestoreBackup = () => {
         });
 
       setFiles(files);
-      setLoading(false);
       BACKUP_FILES_CACHE.splice(0, BACKUP_FILES_CACHE.length, ...files);
     } catch (e) {
       e;
@@ -520,11 +519,7 @@ const BackupItem = ({
         paddingVertical: DefaultAppStyles.GAP_VERTICAL
       }}
     >
-      <View
-        style={{
-          flexShrink: 1
-        }}
-      >
+      <View>
         <Paragraph size={AppFontSize.sm}>{itemName}</Paragraph>
         <Paragraph
           size={AppFontSize.xs}

apps/mobile/app/screens/settings/settings-data.tsx

@@ -82,22 +82,15 @@ export const settingsGroups: SettingSection[] = [
       {
         id: "subscription-status",
         useHook: () => useUserStore((state) => state.user),
-        hidden: (current) => {
-          const user = current as User;
-          return (
-            !user ||
-            !user.subscription ||
-            user.subscription.provider === undefined ||
-            !strings.subscriptionProviderInfo[user?.subscription?.provider] ||
-            user.subscription?.plan === SubscriptionPlan.FREE
-          );
-        },
+        hidden: (current) =>
+          !current ||
+          (current as User).subscription?.plan === SubscriptionPlan.FREE,
         name: (current) => {
           const user = (current as User) || useUserStore.getState().user;
           return (
             strings.subscriptionProviderInfo[
               user?.subscription?.provider
-            ]?.title() || `Unknown provider id: ${user?.subscription?.provider}`
+            ].title() || "Unknown provider"
           );
         },
         icon: "credit-card",
@@ -107,8 +100,6 @@ export const settingsGroups: SettingSection[] = [
           const subscriptionProviderInfo =
             strings.subscriptionProviderInfo[user?.subscription?.provider];
 
-          if (!subscriptionProviderInfo) return;
-
           const isCurrentPlatform =
             (user.subscription?.provider === SubscriptionProvider.APPLE &&
               Platform.OS === "ios") ||
@@ -1436,7 +1427,7 @@ export const settingsGroups: SettingSection[] = [
         id: "docs-link",
         name: strings.documentation(),
         modifer: async () => {
-          Linking.openURL("https://help.notesnook.com/");
+          Linking.openURL("https://docs.notesnook.com");
         },
         description: strings.documentationDesc(),
         icon: "file-document"

apps/mobile/e2e/globalSetup.ts

@@ -1,5 +1,5 @@
 import { execSync } from "child_process";
-//@ts-ignore
+
 import { pathExists, ensureDir } from "fs-extra";
 
 import { resolveConfig } from "detox/internals";

apps/mobile/e2e/tests/search.e2e.ts

@@ -28,9 +28,6 @@ describe("Search", () => {
       .typeTextById("search-input", "Test")
       .wait(1000)
       .isVisibleByText("1")
-      .waitAndTapById("clear-search")
-      .wait(2000)
-      .isNotVisibleByText("1")
       .run();
   });
 });

apps/mobile/e2e/tests/utils.ts

@@ -20,7 +20,6 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import { expect as jestExpect } from "@jest/globals";
 import { device as _device, expect } from "detox";
 import { readFileSync } from "fs";
-//@ts-ignore
 import { toMatchImageSnapshot } from "jest-image-snapshot";
 import type { RouteName } from "../../app/stores/use-navigation-store";
 import { notesnook } from "../test.ids";

apps/mobile/native/android/app/build.gradle

@@ -124,7 +124,7 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         multiDexEnabled true
-        versionCode 3078
+        versionCode 3075
         versionName getNpmVersion()
         testBuildType System.getProperty('testBuildType', 'debug')
         testInstrumentationRunner 'androidx.test.runner.AndroidJUnitRunner'

apps/mobile/native/android/releasenotes/whatsnew-en-US

@@ -1,3 +1,3 @@
-- Bug fixes and minor improvements
+- Minor bug fixes and improvements
 
 Thank you for using Notesnook!

apps/mobile/native/ios/Notesnook.xcodeproj/project.pbxproj

@@ -654,7 +654,6 @@
 			inputPaths = (
 				"${PODS_ROOT}/Target Support Files/Pods-Notesnook/Pods-Notesnook-resources.sh",
 				"${PODS_CONFIGURATION_BUILD_DIR}/RCT-Folly/RCT-Folly_privacy.bundle",
-				"${PODS_CONFIGURATION_BUILD_DIR}/RNImageCropPicker/RNImageCropPickerPrivacyInfo.bundle",
 				"${PODS_CONFIGURATION_BUILD_DIR}/RNImageCropPicker/QBImagePicker.bundle",
 				"${PODS_CONFIGURATION_BUILD_DIR}/RNSVG/RNSVGFilters.bundle",
 				"${PODS_CONFIGURATION_BUILD_DIR}/React-Core/React-Core_privacy.bundle",
@@ -666,7 +665,6 @@
 			name = "[CP] Copy Pods Resources";
 			outputPaths = (
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/RCT-Folly_privacy.bundle",
-				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/RNImageCropPickerPrivacyInfo.bundle",
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/QBImagePicker.bundle",
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/RNSVGFilters.bundle",
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/React-Core_privacy.bundle",
@@ -823,7 +821,6 @@
 			inputPaths = (
 				"${PODS_ROOT}/Target Support Files/Pods-Notesnook-NotesnookTests/Pods-Notesnook-NotesnookTests-resources.sh",
 				"${PODS_CONFIGURATION_BUILD_DIR}/RCT-Folly/RCT-Folly_privacy.bundle",
-				"${PODS_CONFIGURATION_BUILD_DIR}/RNImageCropPicker/RNImageCropPickerPrivacyInfo.bundle",
 				"${PODS_CONFIGURATION_BUILD_DIR}/RNImageCropPicker/QBImagePicker.bundle",
 				"${PODS_CONFIGURATION_BUILD_DIR}/RNSVG/RNSVGFilters.bundle",
 				"${PODS_CONFIGURATION_BUILD_DIR}/React-Core/React-Core_privacy.bundle",
@@ -835,7 +832,6 @@
 			name = "[CP] Copy Pods Resources";
 			outputPaths = (
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/RCT-Folly_privacy.bundle",
-				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/RNImageCropPickerPrivacyInfo.bundle",
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/QBImagePicker.bundle",
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/RNSVGFilters.bundle",
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/React-Core_privacy.bundle",
@@ -1095,7 +1091,7 @@
 				CODE_SIGN_IDENTITY = "Apple Development";
 				"CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "Apple Development";
 				CODE_SIGN_STYLE = Automatic;
-				CURRENT_PROJECT_VERSION = 2157;
+				CURRENT_PROJECT_VERSION = 2154;
 				DEVELOPMENT_TEAM = 53CWBG3QUC;
 				ENABLE_BITCODE = NO;
 				"EXCLUDED_ARCHS[sdk=iphonesimulator*]" = arm64;
@@ -1169,7 +1165,7 @@
 					"$(inherited)",
 					"@executable_path/Frameworks",
 				);
-				MARKETING_VERSION = 3.3.9;
+				MARKETING_VERSION = 3.3.6;
 				OTHER_LDFLAGS = (
 					"$(inherited)",
 					"-ObjC",
@@ -1200,7 +1196,7 @@
 				CODE_SIGN_IDENTITY = "Apple Development";
 				"CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Distribution";
 				CODE_SIGN_STYLE = Manual;
-				CURRENT_PROJECT_VERSION = 2157;
+				CURRENT_PROJECT_VERSION = 2154;
 				DEVELOPMENT_TEAM = "";
 				"DEVELOPMENT_TEAM[sdk=iphoneos*]" = 53CWBG3QUC;
 				"EXCLUDED_ARCHS[sdk=iphonesimulator*]" = arm64;
@@ -1274,7 +1270,7 @@
 					"$(inherited)",
 					"@executable_path/Frameworks",
 				);
-				MARKETING_VERSION = 3.3.9;
+				MARKETING_VERSION = 3.3.6;
 				ONLY_ACTIVE_ARCH = NO;
 				OTHER_LDFLAGS = (
 					"$(inherited)",
@@ -1433,7 +1429,7 @@
 				CODE_SIGN_IDENTITY = "Apple Development";
 				"CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "Apple Development";
 				CODE_SIGN_STYLE = Automatic;
-				CURRENT_PROJECT_VERSION = 2157;
+				CURRENT_PROJECT_VERSION = 2154;
 				DEBUG_INFORMATION_FORMAT = dwarf;
 				DEVELOPMENT_TEAM = 53CWBG3QUC;
 				"EXCLUDED_ARCHS[sdk=iphonesimulator*]" = arm64;
@@ -1445,7 +1441,7 @@
 					"@executable_path/Frameworks",
 					"@executable_path/../../Frameworks",
 				);
-				MARKETING_VERSION = 3.3.9;
+				MARKETING_VERSION = 3.3.6;
 				MTL_ENABLE_DEBUG_INFO = INCLUDE_SOURCE;
 				MTL_FAST_MATH = YES;
 				PRODUCT_BUNDLE_IDENTIFIER = org.streetwriters.notesnook.notewidget;
@@ -1476,7 +1472,7 @@
 				"CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Distribution";
 				CODE_SIGN_STYLE = Manual;
 				COPY_PHASE_STRIP = NO;
-				CURRENT_PROJECT_VERSION = 2157;
+				CURRENT_PROJECT_VERSION = 2154;
 				DEBUG_INFORMATION_FORMAT = "dwarf-with-dsym";
 				DEVELOPMENT_TEAM = "";
 				"DEVELOPMENT_TEAM[sdk=iphoneos*]" = 53CWBG3QUC;
@@ -1489,7 +1485,7 @@
 					"@executable_path/Frameworks",
 					"@executable_path/../../Frameworks",
 				);
-				MARKETING_VERSION = 3.3.9;
+				MARKETING_VERSION = 3.3.6;
 				MTL_FAST_MATH = YES;
 				PRODUCT_BUNDLE_IDENTIFIER = org.streetwriters.notesnook.notewidget;
 				PRODUCT_NAME = "$(TARGET_NAME)";
@@ -1519,7 +1515,7 @@
 				CODE_SIGN_ENTITLEMENTS = "Make Note/Make Note.entitlements";
 				CODE_SIGN_IDENTITY = "Apple Development";
 				CODE_SIGN_STYLE = Automatic;
-				CURRENT_PROJECT_VERSION = 2157;
+				CURRENT_PROJECT_VERSION = 2154;
 				DEBUG_INFORMATION_FORMAT = dwarf;
 				DEVELOPMENT_TEAM = 53CWBG3QUC;
 				"EXCLUDED_ARCHS[sdk=iphonesimulator*]" = arm64;
@@ -1600,7 +1596,7 @@
 					"@executable_path/../../Frameworks",
 				);
 				LIBRARY_SEARCH_PATHS = "$(SDKROOT)/usr/lib/swift$(inherited)";
-				MARKETING_VERSION = 3.3.9;
+				MARKETING_VERSION = 3.3.6;
 				MTL_ENABLE_DEBUG_INFO = INCLUDE_SOURCE;
 				MTL_FAST_MATH = YES;
 				PRODUCT_BUNDLE_IDENTIFIER = org.streetwriters.notesnook.share;
@@ -1631,7 +1627,7 @@
 				"CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Distribution";
 				CODE_SIGN_STYLE = Manual;
 				COPY_PHASE_STRIP = NO;
-				CURRENT_PROJECT_VERSION = 2157;
+				CURRENT_PROJECT_VERSION = 2154;
 				DEBUG_INFORMATION_FORMAT = "dwarf-with-dsym";
 				DEVELOPMENT_TEAM = "";
 				"DEVELOPMENT_TEAM[sdk=iphoneos*]" = 53CWBG3QUC;
@@ -1713,7 +1709,7 @@
 					"@executable_path/../../Frameworks",
 				);
 				LIBRARY_SEARCH_PATHS = "$(SDKROOT)/usr/lib/swift$(inherited)";
-				MARKETING_VERSION = 3.3.9;
+				MARKETING_VERSION = 3.3.6;
 				MTL_FAST_MATH = YES;
 				PRODUCT_BUNDLE_IDENTIFIER = org.streetwriters.notesnook.share;
 				PRODUCT_NAME = "$(TARGET_NAME)";
@@ -1790,10 +1786,7 @@
 				ONLY_ACTIVE_ARCH = YES;
 				OTHER_CFLAGS = "$(inherited)";
 				OTHER_CPLUSPLUSFLAGS = "$(inherited)";
-				OTHER_LDFLAGS = (
-					"$(inherited)",
-					" ",
-				);
+				OTHER_LDFLAGS = "$(inherited)  ";
 				REACT_NATIVE_PATH = "${PODS_ROOT}/../../../node_modules/react-native";
 				SDKROOT = iphoneos;
 				SWIFT_ACTIVE_COMPILATION_CONDITIONS = "$(inherited) DEBUG";
@@ -1858,10 +1851,7 @@
 				ONLY_ACTIVE_ARCH = NO;
 				OTHER_CFLAGS = "$(inherited)";
 				OTHER_CPLUSPLUSFLAGS = "$(inherited)";
-				OTHER_LDFLAGS = (
-					"$(inherited)",
-					" ",
-				);
+				OTHER_LDFLAGS = "$(inherited)  ";
 				REACT_NATIVE_PATH = "${PODS_ROOT}/../../../node_modules/react-native";
 				SDKROOT = iphoneos;
 				USE_HERMES = true;

apps/mobile/native/ios/Notesnook/PrivacyInfo.xcprivacy

@@ -9,7 +9,6 @@
 			<string>NSPrivacyAccessedAPICategoryFileTimestamp</string>
 			<key>NSPrivacyAccessedAPITypeReasons</key>
 			<array>
-				<string>3B52.1</string>
 				<string>C617.1</string>
 			</array>
 		</dict>

apps/mobile/native/ios/Podfile.lock

@@ -1273,11 +1273,11 @@ PODS:
     - React-Core
   - react-native-keep-awake (1.3.1):
     - React-Core
-  - react-native-mmkv-storage (12.0.0):
+  - react-native-mmkv-storage (0.11.2):
     - DoubleConversion
     - glog
     - hermes-engine
-    - MMKV (~> 1.3.14)
+    - MMKV (~> 1.3.9)
     - RCT-Folly (= 2024.11.18.00)
     - RCTRequired
     - RCTTypeSafety
@@ -1372,7 +1372,7 @@ PODS:
   - react-native-screenguard (1.0.0):
     - React-Core
     - SDWebImage (~> 5.11.1)
-  - react-native-share-extension (2.9.5):
+  - react-native-share-extension (2.9.0):
     - React
   - react-native-sodium (1.6.5):
     - React
@@ -1770,53 +1770,15 @@ PODS:
     - Yoga
   - RNIap (12.16.2):
     - React-Core
-  - RNImageCropPicker (0.51.1):
-    - DoubleConversion
-    - glog
-    - hermes-engine
-    - RCT-Folly (= 2024.11.18.00)
-    - RCTRequired
-    - RCTTypeSafety
+  - RNImageCropPicker (0.40.2):
     - React-Core
-    - React-debug
-    - React-Fabric
-    - React-featureflags
-    - React-graphics
-    - React-ImageManager
-    - React-NativeModulesApple
-    - React-RCTFabric
     - React-RCTImage
-    - React-rendererdebug
-    - React-utils
-    - ReactCodegen
-    - ReactCommon/turbomodule/bridging
-    - ReactCommon/turbomodule/core
-    - RNImageCropPicker/QBImagePickerController (= 0.51.1)
-    - TOCropViewController (~> 2.8.0)
-    - Yoga
-  - RNImageCropPicker/QBImagePickerController (0.51.1):
-    - DoubleConversion
-    - glog
-    - hermes-engine
-    - RCT-Folly (= 2024.11.18.00)
-    - RCTRequired
-    - RCTTypeSafety
+    - RNImageCropPicker/QBImagePickerController (= 0.40.2)
+    - TOCropViewController
+  - RNImageCropPicker/QBImagePickerController (0.40.2):
     - React-Core
-    - React-debug
-    - React-Fabric
-    - React-featureflags
-    - React-graphics
-    - React-ImageManager
-    - React-NativeModulesApple
-    - React-RCTFabric
     - React-RCTImage
-    - React-rendererdebug
-    - React-utils
-    - ReactCodegen
-    - ReactCommon/turbomodule/bridging
-    - ReactCommon/turbomodule/core
-    - TOCropViewController (~> 2.8.0)
-    - Yoga
+    - TOCropViewController
   - RNKeychain (4.0.5):
     - React
   - RNNotifee (7.4.9):
@@ -2013,7 +1975,7 @@ PODS:
   - SwiftyRSA (1.7.0):
     - SwiftyRSA/ObjC (= 1.7.0)
   - SwiftyRSA/ObjC (1.7.0)
-  - TOCropViewController (2.8.0)
+  - TOCropViewController (2.7.4)
   - toolbar-android (0.2.1):
     - React
   - Yoga (0.0.0)
@@ -2463,7 +2425,7 @@ SPEC CHECKSUMS:
   react-native-image-resizer: 24c5d06fae2176dc0caed4b6396e02befb44064a
   react-native-in-app-review: b3d1eed3d1596ebf6539804778272c4c65e4a400
   react-native-keep-awake: 03b74eebe4f2bb5e8478fc8f420651a92463b6f8
-  react-native-mmkv-storage: 935d661dc3913a41be70d041aa3ff860d6aa4873
+  react-native-mmkv-storage: 51c33c6f6678d67061059cce8189a57c3e47192e
   react-native-netinfo: 66c9ac0d0ae92a57a9ed99ab8a75429740700c73
   react-native-notification-sounds: ce106d58df0dd384bccbd2e84fb53accab7cc068
   react-native-orientation-locker: cc6f357b289a2e0dd2210fea0c52cb8e0727fdaa
@@ -2472,7 +2434,7 @@ SPEC CHECKSUMS:
   react-native-quick-sqlite: 1bfc7f1e9acbe9a5aa5c4cc81712e9bde3ab7672
   react-native-safe-area-context: 9d72abf6d8473da73033b597090a80b709c0b2f1
   react-native-screenguard: 82437eeb0086a90b5e5d7e54130bb04fb406373e
-  react-native-share-extension: fdc6aaab51591a2d445df239c446aaa3a99658ec
+  react-native-share-extension: bcb7e466390a9e50c742f4b1019d6f181aedd7ad
   react-native-sodium: 285eec063e4232cb67347ef6a434b85e588d38cb
   react-native-theme-switch-animation: d90fe2de0d9e87a63cd6235d98cba6e7054e9a10
   react-native-webview: 079eca50edf657503318b66687dadfb903731aa8
@@ -2517,7 +2479,7 @@ SPEC CHECKSUMS:
   RNFlashList: ff5a0b3113c4cda0eaf4b94df8572ccad3c40fd5
   RNGestureHandler: 92e89a04cd0d1c77f383a55d14c15e7f423f4c00
   RNIap: f94647b3a3dbd5fa08ad7ed847eb588aa5fe95fe
-  RNImageCropPicker: aa81bda9f887e20542b569938cde5ce50a4ec404
+  RNImageCropPicker: 30d770b383d84e1067d82ea7b5ed4fff851bbbb2
   RNKeychain: ffd0513e676445c637410b47249460cbf56bc9cb
   RNNotifee: dabf3cdd7bfd9340bb84358cc78f635af4bc80e2
   RNPrivacySnapshot: ccad3a548338c2f526bb7b1789af3fb0618b7d1d
@@ -2533,7 +2495,7 @@ SPEC CHECKSUMS:
   SocketRocket: d4aabe649be1e368d1318fdf28a022d714d65748
   SSZipArchive: fe6a26b2a54d5a0890f2567b5cc6de5caa600aef
   SwiftyRSA: 8c6dd1ea7db1b8dc4fb517a202f88bb1354bc2c6
-  TOCropViewController: 797deaf39c90e6e9ddd848d88817f6b9a8a09888
+  TOCropViewController: 80b8985ad794298fb69d3341de183f33d1853654
   toolbar-android: c426ed5bd3dcccfed20fd79533efc0d1ae0ef018
   Yoga: 31a098f74c16780569aebd614a0f37a907de0189
 

apps/mobile/native/package.json

@@ -21,7 +21,6 @@
     "@react-navigation/native": "^6.0.10",
     "@react-navigation/native-stack": "6.6.2",
     "@sayem314/react-native-keep-awake": "^1.3.1",
-    "react-native-image-crop-picker": "^0.51.1",
     "react": "18.2.0",
     "react-native": "0.77.2",
     "react-native-actions-shortcuts": "^1.0.1",
@@ -49,7 +48,7 @@
     "react-native-navigation-bar-color": "2.0.2",
     "react-native-notification-sounds": "0.5.5",
     "@shopify/flash-list": "^1.8.0",
-    "react-native-mmkv-storage": "^12.0.0",
+    "react-native-mmkv-storage": "^0.11.2",
     "react-native-quick-sqlite": "^8.2.7",
     "react-native-svg": "^15.12.0",
     "react-native-webview": "^13.13.5",
@@ -62,6 +61,7 @@
     "react-native-zip-archive": "6.0.9",
     "react-native-theme-switch-animation": "^0.6.0",
     "@ammarahmed/react-native-background-fetch": "^4.2.2",
+    "react-native-image-crop-picker": "^0.40.2",
     "react-native-url-polyfill": "^2.0.0",
     "react-native-screenguard": "^1.0.0",
     "@formatjs/intl-locale": "4.0.0",

apps/mobile/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@notesnook/mobile",
-  "version": "3.3.7",
+  "version": "3.3.6",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@notesnook/mobile",
-      "version": "3.3.7",
+      "version": "3.3.6",
       "hasInstallScript": true,
       "license": "GPL-3.0-or-later",
       "workspaces": [
@@ -14,6 +14,7 @@
         "app/"
       ],
       "dependencies": {
+        "@ammarahmed/react-native-share-extension": "^2.9.5",
         "@notesnook/common": "file:../../packages/common",
         "@notesnook/core": "file:../../packages/core",
         "@notesnook/crypto": "file:../../packages/crypto",
@@ -28326,7 +28327,6 @@
         "@ammarahmed/react-native-background-fetch": "^4.2.2",
         "@ammarahmed/react-native-eventsource": "1.1.0",
         "@ammarahmed/react-native-fingerprint-scanner": "^5.0.0",
-        "@ammarahmed/react-native-share-extension": "^2.9.5",
         "@ammarahmed/react-native-sodium": "^1.6.5",
         "@bam.tech/react-native-image-resizer": "3.0.11",
         "@callstack/repack": "~5.1.2",
@@ -28361,10 +28361,10 @@
         "react-native-gzip": "1.1.0",
         "react-native-html-to-pdf-lite": "^0.9.1",
         "react-native-iap": "12.16.2",
-        "react-native-image-crop-picker": "^0.51.1",
+        "react-native-image-crop-picker": "^0.40.2",
         "react-native-in-app-review": "4.3.3",
         "react-native-keychain": "4.0.5",
-        "react-native-mmkv-storage": "^12.0.0",
+        "react-native-mmkv-storage": "^0.11.2",
         "react-native-modal-datetime-picker": "14.0.0",
         "react-native-navigation-bar-color": "2.0.2",
         "react-native-notification-sounds": "0.5.5",
@@ -44519,13 +44519,10 @@
       }
     },
     "node_modules/react-native-image-crop-picker": {
-      "version": "0.51.1",
-      "resolved": "https://registry.npmjs.org/react-native-image-crop-picker/-/react-native-image-crop-picker-0.51.1.tgz",
-      "integrity": "sha512-GIFRyXJgv1dPceKd/hraK9q9V38v45rSg2ONR6RiSePcOJemkHpc/PMU86pq6lWPilDYHSxbZmea2pNMk85ayw==",
+      "version": "0.40.2",
       "license": "MIT",
       "peerDependencies": {
-        "react": "*",
-        "react-native": "*"
+        "react-native": ">=0.40.0"
       }
     },
     "node_modules/react-native-image-pan-zoom": {
@@ -44593,9 +44590,9 @@
       }
     },
     "node_modules/react-native-mmkv-storage": {
-      "version": "12.0.0",
-      "resolved": "https://registry.npmjs.org/react-native-mmkv-storage/-/react-native-mmkv-storage-12.0.0.tgz",
-      "integrity": "sha512-sssZInILQBquytDDfjosjEdvevwMPk3fqQQjdjfnH362IcsBsApvtT8yJS406Mz9aJ6VhqVsZw/awltsUuPSYg==",
+      "version": "0.11.2",
+      "resolved": "https://registry.npmjs.org/react-native-mmkv-storage/-/react-native-mmkv-storage-0.11.2.tgz",
+      "integrity": "sha512-/jbYNOUrwgVU09WyXDK6lFGXqBs+23oR9X37z3N68rwHNiXF5WDyXnT38dU2tF07ZlvmsobNHgdxgTu4kGQUKQ==",
       "license": "MIT",
       "bin": {
         "mmkv-link": "autolink/postlink/run.js"

apps/mobile/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@notesnook/mobile",
-  "version": "3.3.9",
+  "version": "3.3.6",
   "private": true,
   "license": "GPL-3.0-or-later",
   "workspaces": [

apps/mobile/patches/react-native-image-crop-picker+0.40.2.patch

@@ -1,27 +1,27 @@
-diff --git a/node_modules/react-native-image-crop-picker/android/src/main/java/com/reactnative/ivpusic/imagepicker/ImageCropPicker.java b/node_modules/react-native-image-crop-picker/android/src/main/java/com/reactnative/ivpusic/imagepicker/ImageCropPicker.java
-index b9c494e..34ef800 100644
---- a/node_modules/react-native-image-crop-picker/android/src/main/java/com/reactnative/ivpusic/imagepicker/ImageCropPicker.java
-+++ b/node_modules/react-native-image-crop-picker/android/src/main/java/com/reactnative/ivpusic/imagepicker/ImageCropPicker.java
-@@ -679,6 +679,7 @@ class ImageCropPicker implements ActivityEventListener {
+diff --git a/node_modules/react-native-image-crop-picker/android/src/main/java/com/reactnative/ivpusic/imagepicker/PickerModule.java b/node_modules/react-native-image-crop-picker/android/src/main/java/com/reactnative/ivpusic/imagepicker/PickerModule.java
+index 5de0845..1b158d8 100644
+--- a/node_modules/react-native-image-crop-picker/android/src/main/java/com/reactnative/ivpusic/imagepicker/PickerModule.java
++++ b/node_modules/react-native-image-crop-picker/android/src/main/java/com/reactnative/ivpusic/imagepicker/PickerModule.java
+@@ -692,6 +692,7 @@ class PickerModule extends ReactContextBaseJavaModule implements ActivityEventLi
+         image.putString("mime", options.outMimeType);
          image.putInt("size", (int) new File(compressedImagePath).length());
          image.putString("modificationDate", String.valueOf(modificationDate));
-         image.putString("filename", new File(path).getName());
 +        image.putString("sourceURL", path);
  
          if (includeBase64) {
              image.putString("data", getBase64StringFromFile(compressedImagePath));
-diff --git a/node_modules/react-native-image-crop-picker/ios/src/ImageCropPicker.mm b/node_modules/react-native-image-crop-picker/ios/src/ImageCropPicker.mm
-index 354ad09..622f779 100644
---- a/node_modules/react-native-image-crop-picker/ios/src/ImageCropPicker.mm
-+++ b/node_modules/react-native-image-crop-picker/ios/src/ImageCropPicker.mm
-@@ -603,7 +603,10 @@ - (void)qb_imagePickerController:(QBImagePickerController *)imagePickerControlle
+diff --git a/node_modules/react-native-image-crop-picker/ios/src/ImageCropPicker.m b/node_modules/react-native-image-crop-picker/ios/src/ImageCropPicker.m
+index 9f20973..5e14da8 100644
+--- a/node_modules/react-native-image-crop-picker/ios/src/ImageCropPicker.m
++++ b/node_modules/react-native-image-crop-picker/ios/src/ImageCropPicker.m
+@@ -595,8 +595,10 @@ - (void)qb_imagePickerController:
+                                     NSString *mimeType = [self determineMimeTypeFromImageData:imageData];
                                      Boolean isKnownMimeType = [mimeType length] > 0;
                                      
++                                    Boolean isHeicOrHeif = [mimeType isEqualToString:@"image/heic"] || [mimeType isEqualToString:@"image/heif"];
++                                    
                                      ImageResult *imageResult = [[ImageResult alloc] init];
 -                                    if (isLossless && useOriginalWidth && useOriginalHeight && isKnownMimeType && !forceJpg) {
-+
-+                                    Boolean isHeicOrHeif = [mimeType isEqualToString:@"image/heic"] || [mimeType isEqualToString:@"image/heif"];
-+
 +                                    if (isLossless && useOriginalWidth && useOriginalHeight && isKnownMimeType && !forceJpg && !isHeicOrHeif) {
                                          // Use original, unmodified image
                                          imageResult.data = imageData;

apps/mobile/patches/react-native-keychain+4.0.5.patch

@@ -1,169 +0,0 @@
-diff --git a/node_modules/react-native-keychain/android/build.gradle b/node_modules/react-native-keychain/android/build.gradle
-index bd2fe04..53ce4b1 100755
---- a/node_modules/react-native-keychain/android/build.gradle
-+++ b/node_modules/react-native-keychain/android/build.gradle
-@@ -51,5 +51,4 @@ dependencies {
-     //noinspection GradleDynamicVersion
-     implementation 'com.facebook.react:react-native:+'  // From node_modules
-     implementation 'androidx.annotation:annotation:1.1.0'
--    implementation 'com.facebook.conceal:conceal:1.1.3@aar'
- }
-diff --git a/node_modules/react-native-keychain/android/src/main/java/com/oblador/keychain/KeychainModule.java b/node_modules/react-native-keychain/android/src/main/java/com/oblador/keychain/KeychainModule.java
-index 61d061e..be49f8a 100644
---- a/node_modules/react-native-keychain/android/src/main/java/com/oblador/keychain/KeychainModule.java
-+++ b/node_modules/react-native-keychain/android/src/main/java/com/oblador/keychain/KeychainModule.java
-@@ -15,7 +15,6 @@ import com.oblador.keychain.PrefsStorage.ResultSet;
- import com.oblador.keychain.cipherStorage.CipherStorage;
- import com.oblador.keychain.cipherStorage.CipherStorage.DecryptionResult;
- import com.oblador.keychain.cipherStorage.CipherStorage.EncryptionResult;
--import com.oblador.keychain.cipherStorage.CipherStorageFacebookConceal;
- import com.oblador.keychain.cipherStorage.CipherStorageKeystoreAESCBC;
- import com.oblador.keychain.exceptions.CryptoFailedException;
- import com.oblador.keychain.exceptions.EmptyParameterException;
-@@ -48,7 +47,6 @@ public class KeychainModule extends ReactContextBaseJavaModule {
-         super(reactContext);
-         prefsStorage = new PrefsStorage(reactContext);
- 
--        addCipherStorageToMap(new CipherStorageFacebookConceal(reactContext));
-         addCipherStorageToMap(new CipherStorageKeystoreAESCBC());
-     }
- 
-diff --git a/node_modules/react-native-keychain/android/src/main/java/com/oblador/keychain/PrefsStorage.java b/node_modules/react-native-keychain/android/src/main/java/com/oblador/keychain/PrefsStorage.java
-index 99448b1..792c24c 100644
---- a/node_modules/react-native-keychain/android/src/main/java/com/oblador/keychain/PrefsStorage.java
-+++ b/node_modules/react-native-keychain/android/src/main/java/com/oblador/keychain/PrefsStorage.java
-@@ -7,7 +7,6 @@ import android.util.Base64;
- 
- import com.facebook.react.bridge.ReactApplicationContext;
- import com.oblador.keychain.cipherStorage.CipherStorage.EncryptionResult;
--import com.oblador.keychain.cipherStorage.CipherStorageFacebookConceal;
- 
- public class PrefsStorage {
-     public static final String KEYCHAIN_DATA = "RN_KEYCHAIN";
-@@ -35,10 +34,6 @@ public class PrefsStorage {
-         byte[] bytesForPassword = getBytesForPassword(service);
-         String cipherStorageName = getCipherStorageName(service);
-         if (bytesForUsername != null && bytesForPassword != null) {
--            if (cipherStorageName == null) {
--                // If the CipherStorage name is not found, we assume it is because the entry was written by an older version of this library. The older version used Facebook Conceal, so we default to that.
--                cipherStorageName = CipherStorageFacebookConceal.CIPHER_STORAGE_NAME;
--            }
-             return new ResultSet(cipherStorageName, bytesForUsername, bytesForPassword);
-         }
-         return null;
-diff --git a/node_modules/react-native-keychain/android/src/main/java/com/oblador/keychain/cipherStorage/CipherStorageFacebookConceal.java b/node_modules/react-native-keychain/android/src/main/java/com/oblador/keychain/cipherStorage/CipherStorageFacebookConceal.java
-deleted file mode 100644
-index 3162f99..0000000
---- a/node_modules/react-native-keychain/android/src/main/java/com/oblador/keychain/cipherStorage/CipherStorageFacebookConceal.java
-+++ /dev/null
-@@ -1,110 +0,0 @@
--package com.oblador.keychain.cipherStorage;
--
--import android.os.Build;
--import androidx.annotation.NonNull;
--
--import com.facebook.android.crypto.keychain.AndroidConceal;
--import com.facebook.android.crypto.keychain.SharedPrefsBackedKeyChain;
--import com.facebook.crypto.Crypto;
--import com.facebook.crypto.CryptoConfig;
--import com.facebook.crypto.Entity;
--import com.facebook.crypto.keychain.KeyChain;
--import com.facebook.react.bridge.ReactApplicationContext;
--import com.oblador.keychain.SecurityLevel;
--import com.oblador.keychain.exceptions.CryptoFailedException;
--
--import java.nio.charset.Charset;
--
--public class CipherStorageFacebookConceal implements CipherStorage {
--    public static final String CIPHER_STORAGE_NAME = "FacebookConceal";
--    public static final String KEYCHAIN_DATA = "RN_KEYCHAIN";
--    private final Crypto crypto;
--
--    public CipherStorageFacebookConceal(ReactApplicationContext reactContext) {
--        KeyChain keyChain = new SharedPrefsBackedKeyChain(reactContext, CryptoConfig.KEY_256);
--        this.crypto = AndroidConceal.get().createDefaultCrypto(keyChain);
--    }
--
--    @Override
--    public String getCipherStorageName() {
--        return CIPHER_STORAGE_NAME;
--    }
--
--    @Override
--    public int getMinSupportedApiLevel() {
--        return Build.VERSION_CODES.JELLY_BEAN;
--    }
--
--    @Override
--    public SecurityLevel securityLevel() {
--        return SecurityLevel.ANY;
--    }
--
--    @Override
--    public boolean supportsSecureHardware() {
--        return false;
--    }
--
--    @Override
--    public EncryptionResult encrypt(@NonNull String service, @NonNull String username, @NonNull String password, SecurityLevel level) throws CryptoFailedException {
--
--        if (!this.securityLevel().satisfiesSafetyThreshold(level)) {
--            throw new CryptoFailedException(String.format("Insufficient security level (wants %s; got %s)", level, this.securityLevel()));
--        }
--
--        if (!crypto.isAvailable()) {
--            throw new CryptoFailedException("Crypto is missing");
--        }
--        Entity usernameEntity = createUsernameEntity(service);
--        Entity passwordEntity = createPasswordEntity(service);
--
--        try {
--            byte[] encryptedUsername = crypto.encrypt(username.getBytes(Charset.forName("UTF-8")), usernameEntity);
--            byte[] encryptedPassword = crypto.encrypt(password.getBytes(Charset.forName("UTF-8")), passwordEntity);
--
--            return new EncryptionResult(encryptedUsername, encryptedPassword, this);
--        } catch (Exception e) {
--            throw new CryptoFailedException("Encryption failed for service " + service, e);
--        }
--    }
--
--    @Override
--    public DecryptionResult decrypt(@NonNull String service, @NonNull byte[] username, @NonNull byte[] password) throws CryptoFailedException {
--        if (!crypto.isAvailable()) {
--            throw new CryptoFailedException("Crypto is missing");
--        }
--        Entity usernameEntity = createUsernameEntity(service);
--        Entity passwordEntity = createPasswordEntity(service);
--
--        try {
--            byte[] decryptedUsername = crypto.decrypt(username, usernameEntity);
--            byte[] decryptedPassword = crypto.decrypt(password, passwordEntity);
--
--            return new DecryptionResult(
--                    new String(decryptedUsername, Charset.forName("UTF-8")),
--                    new String(decryptedPassword, Charset.forName("UTF-8")),
--                    SecurityLevel.ANY);
--        } catch (Exception e) {
--            throw new CryptoFailedException("Decryption failed for service " + service, e);
--        }
--    }
--
--    @Override
--    public void removeKey(@NonNull String service) {
--        // Facebook Conceal stores only one key across all services, so we cannot delete the key (otherwise decryption will fail for encrypted data of other services).
--    }
--
--    private Entity createUsernameEntity(String service) {
--        String prefix = getEntityPrefix(service);
--        return Entity.create(prefix + "user");
--    }
--
--    private Entity createPasswordEntity(String service) {
--        String prefix = getEntityPrefix(service);
--        return Entity.create(prefix + "pass");
--    }
--
--    private String getEntityPrefix(String service) {
--        return KEYCHAIN_DATA + ":" + service;
--    }
--}

apps/mobile/patches/react-native-mmkv-storage+0.11.2.patch

@@ -0,0 +1,14 @@
+diff --git a/node_modules/react-native-mmkv-storage/android/build.gradle b/node_modules/react-native-mmkv-storage/android/build.gradle
+index abb696e..ba35baa 100644
+--- a/node_modules/react-native-mmkv-storage/android/build.gradle
++++ b/node_modules/react-native-mmkv-storage/android/build.gradle
+@@ -98,7 +98,8 @@ android {
+       cmake {
+         cppFlags "-O3 -frtti -fexceptions -Wall -fstack-protector-all"
+         arguments "-DANDROID_STL=c++_shared",
+-                  "-DREACT_NATIVE_MINOR_VERSION=${REACT_NATIVE_MINOR_VERSION}"
++                  "-DREACT_NATIVE_MINOR_VERSION=${REACT_NATIVE_MINOR_VERSION}",
++                  "-DANDROID_SUPPORT_FLEXIBLE_PAGE_SIZES=ON"
+         abiFilters (*reactNativeArchitectures())
+       }
+     }

apps/mobile/share/fetch-webview.js

@@ -28,6 +28,7 @@ import RNFetchBlob from "react-native-blob-util";
 import WebView from "react-native-webview";
 import { Config } from "./store";
 import { db } from "../app/common/database";
+import { SUBSCRIPTION_STATUS } from "../app/utils/constants";
 
 export const fetchHandle = createRef();
 export const HtmlLoadingWebViewAgent = React.memo(
@@ -39,7 +40,6 @@ export const HtmlLoadingWebViewAgent = React.memo(
     const webview = useRef();
     const premium = useRef(false);
     const corsProxy = Config.corsProxy;
-    const [isLoggedIn, setIsLoggedIn] = useState();
 
     useImperativeHandle(
       fetchHandle,
@@ -72,8 +72,11 @@ export const HtmlLoadingWebViewAgent = React.memo(
     useEffect(() => {
       (async () => {
         const user = await db.user.getUser();
-        setIsLoggedIn(!!user);
-        console.log("USER", !!user);
+        const subscriptionStatus =
+          user?.subscription?.type || SUBSCRIPTION_STATUS.BASIC;
+        premium.current =
+          user && subscriptionStatus !== SUBSCRIPTION_STATUS.BASIC;
+
         const clipperPath =
           Platform.OS === "ios"
             ? RNFetchBlob.fs.dirs.MainBundleDir +
@@ -88,7 +91,6 @@ export const HtmlLoadingWebViewAgent = React.memo(
           .catch((e) => console.log(e));
       })();
     }, []);
-    console.log(isLoggedIn);
 
     return !source || !clipper ? null : (
       <WebView
@@ -101,8 +103,7 @@ export const HtmlLoadingWebViewAgent = React.memo(
           height: 100,
           position: "absolute",
           opacity: 0,
-          zIndex: -1,
-          pointerEvents: "none"
+          zIndex: -1
         }}
         useSharedProcessPool={false}
         pointerEvents="none"
@@ -122,11 +123,7 @@ export const HtmlLoadingWebViewAgent = React.memo(
             console.log("Error handling webview message", e);
           }
         }}
-        injectedJavaScriptBeforeContentLoaded={script(
-          clipper,
-          corsProxy,
-          isLoggedIn
-        )}
+        injectedJavaScriptBeforeContentLoaded={script(clipper, premium.current)}
         onError={() => {
           console.log("Error loading page");
           loadHandler.current?.();
@@ -140,11 +137,9 @@ export const HtmlLoadingWebViewAgent = React.memo(
   () => true
 );
 
-const script = (clipper, corsProxy, loggedIn) => `
-globalThis.module = {};
+const script = (clipper, pro) => `
 ${clipper}
 
-
 function postMessage(type, value) {
   if (window.ReactNativeWebView) {
     window.ReactNativeWebView.postMessage(
@@ -163,10 +158,10 @@ function postMessage(type, value) {
         postMessage("error", globalThis.Clipper.clipPage);
       } else {
         globalThis.Clipper.clipPage(document,false, {
-          images: ${loggedIn ? "true" : "false"},
+          images: ${pro},
           inlineImages: false,
           styles: false,
-          corsProxy: ${corsProxy ? `"${corsProxy}"` : "undefined"}
+          corsProxy: undefined
         }).then(result => {
           postMessage("html", result);
         }).catch(e => {

apps/mobile/share/share.js

@@ -267,6 +267,7 @@ const ShareView = () => {
   );
 
   const onLoad = useCallback(() => {
+    console.log(noteContent.current, "current...");
     eSendEvent(eOnLoadNote + "shareEditor", {
       id: null,
       content: {
@@ -746,7 +747,7 @@ const ShareView = () => {
                   </Paragraph>
                   {rawData.value && isURL(rawData.value) ? (
                     <Button
-                      type={mode === 2 ? "inverted" : "plain"}
+                      type={mode === 2 ? "inverted" : "transparent"}
                       icon={mode === 2 ? "radiobox-marked" : "radiobox-blank"}
                       onPress={() => changeMode(2)}
                       title={modes[2].title}
@@ -757,9 +758,9 @@ const ShareView = () => {
                     />
                   ) : null}
                   <Button
-                    type={mode === 1 ? "inverted" : "plain"}
+                    type={mode === 1 ? "inverted" : "transparent"}
                     icon={mode === 1 ? "radiobox-marked" : "radiobox-blank"}
-                    onPress={() => changeMode(1)}
+                    onPress={() => changeMode(2)}
                     title={modes[1].title}
                     height={30}
                     style={{

apps/monograph/package-lock.json

@@ -141,7 +141,7 @@
       "hasInstallScript": true,
       "license": "GPL-3.0-or-later",
       "dependencies": {
-        "@notesnook-importer/core": "^2.2.5",
+        "@notesnook-importer/core": "^2.2.2",
         "@notesnook/common": "file:../common",
         "@notesnook/intl": "file:../intl",
         "@notesnook/theme": "file:../theme",

apps/theme-builder/package-lock.json

@@ -987,7 +987,7 @@
     },
     "../web": {
       "name": "@notesnook/web",
-      "version": "3.3.4",
+      "version": "3.3.1",
       "hasInstallScript": true,
       "license": "GPL-3.0-or-later",
       "dependencies": {
@@ -1001,7 +1001,7 @@
         "@lingui/react": "5.1.2",
         "@mdi/js": "7.4.47",
         "@mdi/react": "1.6.1",
-        "@notesnook-importer/core": "^2.2.5",
+        "@notesnook-importer/core": "^2.2.2",
         "@notesnook/common": "file:../../packages/common",
         "@notesnook/core": "file:../../packages/core",
         "@notesnook/crypto": "file:../../packages/crypto",

apps/web/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@notesnook/web",
   "description": "Your private note taking space",
-  "version": "3.3.5",
+  "version": "3.3.2",
   "private": true,
   "main": "./src/app.js",
   "homepage": "https://notesnook.com/",

apps/web/src/common/drop-handler.ts

@@ -30,18 +30,13 @@ export async function handleDrop(
   item:
     | ItemReference
     | Context
-    | { type: "trash" | "notebooks" | "favorites" | "archive" | undefined }
+    | { type: "trash" | "notebooks" | "favorites" | undefined }
 ) {
   if (!item.type) return;
 
   const noteIds = getDragData(dataTransfer, "note");
   const notebookIds = getDragData(dataTransfer, "notebook");
-  const {
-    setColor,
-    favorite,
-    delete: trashNotes,
-    archive
-  } = useNoteStore.getState();
+  const { setColor, favorite, delete: trashNotes } = useNoteStore.getState();
   switch (item.type) {
     case "notebook":
       if (noteIds.length > 0) {
@@ -88,8 +83,5 @@ export async function handleDrop(
         await useNoteStore.getState().refresh();
       }
       break;
-    case "archive":
-      archive(true, ...noteIds);
-      break;
   }
 }

apps/web/src/common/export.ts

@@ -92,11 +92,7 @@ export async function exportNotes(
       const { createZipStream } = await import("../utils/streams/zip-stream");
 
       const errors: Error[] = [];
-      const exportStream = new ExportStream(
-        report,
-        (e) => errors.push(e),
-        await notes.count()
-      );
+      const exportStream = new ExportStream(report, (e) => errors.push(e));
       await fromAsyncIterator(
         _exportNotes(notes, { format, unlockVault: Vault.unlockVault })
       )

apps/web/src/components/editor/index.tsx

@@ -44,7 +44,6 @@ import {
   useStore as useAppStore,
   store as appstore
 } from "../../stores/app-store";
-import { useStore as useUserStore } from "../../stores/user-store";
 import { useStore as useSearchStore } from "../../stores/search-store";
 import { AppEventManager, AppEvents } from "../../common/app-events";
 import { FlexScrollContainer } from "../scroll-container";
@@ -78,7 +77,6 @@ import { Pane, SplitPane } from "../split-pane";
 import { TITLE_BAR_HEIGHT } from "../title-bar";
 import { isMobile } from "../../hooks/use-mobile";
 import { isTablet } from "../../hooks/use-tablet";
-import { ConfirmDialog } from "../../dialogs/confirm";
 
 const PDFPreview = React.lazy(() => import("../pdf-preview"));
 
@@ -226,13 +224,11 @@ export default function TabsView() {
               <TableOfContents sessionId={activeSession.id} />
             </Pane>
           ) : null}
-          {arePropertiesVisible &&
-            activeSession &&
-            activeSession.type !== "new" && (
-              <Pane id="properties-pane" initialSize={250} minSize={250}>
-                <Properties sessionId={activeSession.id} />
-              </Pane>
-            )}
+          {arePropertiesVisible && activeSession && (
+            <Pane id="properties-pane" initialSize={250} minSize={250}>
+              <Properties sessionId={activeSession.id} />
+            </Pane>
+          )}
         </SplitPane>
         <DropZone overlayRef={overlayRef} />
       </ScopedThemeProvider>
@@ -608,15 +604,6 @@ export function Editor(props: EditorProps) {
           }
         }}
         onInsertAttachment={async (type) => {
-          if (!useUserStore.getState().isLoggedIn) {
-            ConfirmDialog.show({
-              title: strings.notLoggedIn(),
-              message: strings.loginToUploadAttachments(),
-              positiveButtonText: strings.okay()
-            });
-            return;
-          }
-
           const mime = type === "file" ? "*/*" : "image/*";
           const attachments = await insertAttachments(mime);
           const editor = useEditorManager.getState().getEditor(id)?.editor;

apps/web/src/components/editor/tiptap.tsx

@@ -51,7 +51,6 @@ import {
 import { IEditor, MAX_AUTO_SAVEABLE_WORDS } from "./types";
 import { useEditorConfig, useToolbarConfig, useEditorManager } from "./manager";
 import { useStore as useSettingsStore } from "../../stores/setting-store";
-import { useStore as useUserStore } from "../../stores/user-store";
 import { debounce, useAreFeaturesAvailable } from "@notesnook/common";
 import { ScopedThemeProvider } from "../theme-provider";
 import { useStore as useThemeStore } from "../../stores/theme-store";
@@ -66,8 +65,6 @@ import { EDITOR_ZOOM } from "./common";
 import { ScrollContainer } from "@notesnook/ui";
 import { showFeatureNotAllowedToast } from "../../common/toasts";
 import { UpgradeDialog } from "../../dialogs/buy-dialog/upgrade-dialog";
-import { ConfirmDialog } from "../../dialogs/confirm";
-import { strings } from "@notesnook/intl";
 
 export type OnChangeHandler = (
   content: () => string,
@@ -118,7 +115,7 @@ function countCharacters(text: string) {
 function countParagraphs(fragment: Fragment) {
   let count = 0;
   fragment.nodesBetween(0, fragment.size, (node) => {
-    if (node.type.name === "paragraph" && node.content.size > 0) {
+    if (node.type.name === "paragraph") {
       count++;
     }
     return true;
@@ -188,6 +185,7 @@ function TipTap(props: TipTapProps) {
 
   const autoSave = useRef(true);
   const { toolbarConfig } = useToolbarConfig();
+
   const features = useAreFeaturesAvailable([
     "callout",
     "outlineList",
@@ -198,19 +196,9 @@ function TipTap(props: TipTapProps) {
     claims: {
       callout: !!features?.callout?.isAllowed,
       outlineList: !!features?.outlineList?.isAllowed,
-      taskList: !!features?.taskList?.isAllowed,
-      insertAttachment: !!useUserStore.getState().isLoggedIn
+      taskList: !!features?.taskList?.isAllowed
     },
     onPermissionDenied: (claim, silent) => {
-      if (claim === "insertAttachment") {
-        ConfirmDialog.show({
-          title: strings.notLoggedIn(),
-          message: strings.loginToUploadAttachments(),
-          positiveButtonText: strings.okay()
-        });
-        return;
-      }
-
       if (silent) {
         console.log(features, features?.[claim]);
         if (features?.[claim]) showFeatureNotAllowedToast(features[claim]);
@@ -737,7 +725,7 @@ function toIEditor(editor: Editor): IEditor {
 function getSelectedParagraphs(editor: Editor, selection: Selection): number {
   let count = 0;
   editor.state.doc.nodesBetween(selection.from, selection.to, (node) => {
-    if (node.type.name === "paragraph" && node.content.size > 0) {
+    if (node.type.name === "paragraph") {
       count++;
     }
     return true;

apps/web/src/components/navigation-menu/index.tsx

@@ -506,8 +506,6 @@ function RouteItem({
               ? "trash"
               : item.path === "/favorites"
               ? "favorites"
-              : item.path == "/archive"
-              ? "archive"
               : undefined
         });
       }}

apps/web/src/dialogs/settings/index.tsx

@@ -82,7 +82,6 @@ import { mdToHtml } from "../../utils/md";
 import { InboxSettings } from "./inbox-settings";
 import { withFeatureCheck } from "../../common";
 import { NotesnookCircleSettings } from "./notesnook-circle-settings";
-import { hashNavigate } from "../../navigation";
 
 type SettingsDialogProps = BaseDialogProps<false> & {
   activeSection?: SectionKeys;
@@ -272,12 +271,6 @@ function SettingsSideBar(props: SettingsSideBarProps) {
   const [route, setRoute] = useState<SectionKeys>(activeSection || "profile");
   useUserStore((store) => store.isLoggedIn);
 
-  useEffect(() => {
-    hashNavigate(`/settings/${route}`, {
-      notify: false
-    });
-  }, [route, activeSection]);
-
   return (
     <FlexScrollContainer
       id="settings-side-menu"

apps/web/src/dialogs/settings/types.ts

@@ -20,32 +20,29 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import { FeatureId } from "@notesnook/common";
 import { Icon } from "../../components/icons";
 
-const SectionKeys = [
-  "profile",
-  "auth",
-  "subscription",
-  "sync",
-  "appearance",
-  "behaviour",
-  "desktop",
-  "notifications",
-  "servers",
-  "editor",
-  "backup-export",
-  "export",
-  "importer",
-  "vault",
-  "app-lock",
-  "privacy",
-  "support",
-  "legal",
-  "developer",
-  "about",
-  "inbox",
-  "circle"
-] as const;
-
-export type SectionKeys = (typeof SectionKeys)[number];
+export type SectionKeys =
+  | "profile"
+  | "auth"
+  | "subscription"
+  | "sync"
+  | "appearance"
+  | "behaviour"
+  | "desktop"
+  | "notifications"
+  | "servers"
+  | "editor"
+  | "backup-export"
+  | "export"
+  | "importer"
+  | "vault"
+  | "app-lock"
+  | "privacy"
+  | "support"
+  | "legal"
+  | "developer"
+  | "about"
+  | "inbox"
+  | "circle";
 
 export type SectionGroupKeys =
   | "account"
@@ -156,7 +153,3 @@ export type TextInputSettingComponent = BaseSettingComponent<"input"> & {
 export type CustomSettingComponent = BaseSettingComponent<"custom"> & {
   component: () => JSX.Element | null;
 };
-
-export function isSectionKey(key: string): key is SectionKeys {
-  return SectionKeys.includes(key as SectionKeys);
-}

apps/web/src/navigation/hash-routes.tsx

@@ -33,7 +33,6 @@ import {
 import { FeatureDialog } from "../dialogs/feature-dialog";
 import { CreateTagDialog } from "../dialogs/item-dialog";
 import { OnboardingDialog } from "../dialogs/onboarding-dialog";
-import { isSectionKey, SectionKeys } from "../dialogs/settings/types";
 
 const hashroutes = defineHashRoutes({
   "/": () => {},
@@ -69,11 +68,6 @@ const hashroutes = defineHashRoutes({
   },
   "/settings": () => {
     SettingsDialog.show({}).then(afterAction);
-  },
-  "/settings/:section": ({ section }) => {
-    SettingsDialog.show(
-      isSectionKey(section) ? { activeSection: section as SectionKeys } : {}
-    ).then(afterAction);
   }
 });
 

apps/web/src/utils/streams/export-stream.ts

@@ -28,13 +28,8 @@ export class ExportStream extends TransformStream<
 > {
   progress = 0;
   constructor(
-    report: (progress: {
-      text: string;
-      current?: number;
-      total?: number;
-    }) => void,
-    handleError: (error: Error) => void,
-    totalItems?: number
+    report: (progress: { text: string; current?: number }) => void,
+    handleError: (error: Error) => void
   ) {
     super({
       transform: async (item, controller) => {
@@ -74,8 +69,7 @@ export class ExportStream extends TransformStream<
           controller.enqueue(item);
           report({
             current: this.progress++,
-            text: `Exporting note: ${item.path}`,
-            total: totalItems
+            text: `Exporting note: ${item.path}`
           });
         }
       }

apps/web/src/utils/web-extension-server.ts

@@ -73,11 +73,7 @@ export class WebExtensionServer implements Server {
   async saveClip(clip: Clip) {
     let clipContent = "";
 
-    if (
-      clip.mode === "simplified" ||
-      clip.mode === "screenshot" ||
-      clip.mode === "bookmark"
-    ) {
+    if (clip.mode === "simplified" || clip.mode === "screenshot") {
       clipContent += clip.data;
     } else {
       const clippedFile = new File(
@@ -109,17 +105,11 @@ export class WebExtensionServer implements Server {
     if (isCipher(content)) return;
 
     content += clipContent;
-    content +=
-      clip.mode === "bookmark"
-        ? h("div", [
-            h("p", [`Date bookmarked: ${getFormattedDate(Date.now())}`]),
-            h("hr")
-          ]).innerHTML
-        : h("div", [
-            h("hr"),
-            h("p", ["Clipped from ", h("a", [clip.title], { href: clip.url })]),
-            h("p", [`Date clipped: ${getFormattedDate(Date.now())}`])
-          ]).innerHTML;
+    content += h("div", [
+      h("hr"),
+      h("p", ["Clipped from ", h("a", [clip.title], { href: clip.url })]),
+      h("p", [`Date clipped: ${getFormattedDate(Date.now())}`])
+    ]).innerHTML;
 
     const id = await db.notes.add({
       id: note?.id,

docs/help/contents/faqs/login-to-upload-attachments.md

@@ -1,8 +0,0 @@
----
-title: Login to upload attachments 
-description: We require users to be logged in to upload attachments. 
----
-
-# Login to upload attachments 
-
-We require users to be logged in to upload attachments. This is because attachments are encrypted using a sub-key derived from your database encryption key. Without a login, we cannot encrypt/upload/sync attachments.

docs/help/contents/web-clipper/clipping-your-first-web-page-with-web-clipper.md

@@ -73,10 +73,6 @@ The `Selected nodes` mode allows you to select exactly which nodes you want to c
 
 The clipping mode controls how the final clip should look.
 
-### Bookmark
-
-`Bookmark` mode saves only the URL of the page along with the title. It is best suited to save pages for later reading/reference.
-
 ### Simplified
 
 `Simplified` mode doesn't include any styles. It is best suited for long-form content such as articles & blogs. All clips in `Simplified` mode are saved directly as is i.e. they do not appear as web clip embeds in the Notesnook editor.

docs/help/docgen.yaml

@@ -84,4 +84,3 @@ navigation:
     children:
       - path: faqs/what-are-merge-conflicts.md
       - path: faqs/is-there-an-eta.md
-      - paht: faqs/login-to-upload-attachments.md

extensions/web-clipper/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@notesnook/web-clipper",
-  "version": "0.4.0",
+  "version": "0.3.4",
   "private": true,
   "main": "./dist/cjs/index.js",
   "module": "./dist/esm/index.js",
@@ -105,7 +105,7 @@
     "style-loader": "^3.3.1",
     "terser-webpack-plugin": "^5.3.1",
     "ts-loader": "^9.2.6",
-    "web-ext": "^7.12.0",
+    "web-ext": "^7.6.2",
     "webpack": "5.88.2",
     "webpack-cli": "5.1.4",
     "webpack-dev-server": "^4.7.4"

extensions/web-clipper/src/common/bridge.ts

@@ -21,7 +21,7 @@ import { ThemeDefinition } from "@notesnook/theme";
 
 export type ClipArea = "full-page" | "visible" | "selection" | "article";
 
-export type ClipMode = "bookmark" | "simplified" | "screenshot" | "complete";
+export type ClipMode = "simplified" | "screenshot" | "complete";
 
 export type User = {
   email?: string;

extensions/web-clipper/src/components/icons/index.ts

@@ -57,7 +57,6 @@ export const Icons = {
   visible: mdiViewDayOutline,
   selection: mdiCursorDefaultClickOutline,
 
-  bookmark: mdiBookmarkOutline,
   simplified: mdiTextBoxOutline,
   screenshot: mdiFitToScreenOutline,
   complete: mdiViewDashboardOutline,

extensions/web-clipper/src/views/main.tsx

@@ -68,11 +68,6 @@ const clipAreas: { name: string; id: ClipArea; icon: string }[] = [
 
 const clipModes: { name: string; id: ClipMode; icon: string; pro?: boolean }[] =
   [
-    {
-      name: "Bookmark",
-      id: "bookmark",
-      icon: Icons.bookmark
-    },
     {
       name: "Simplified",
       id: "simplified",
@@ -92,20 +87,6 @@ const clipModes: { name: string; id: ClipMode; icon: string; pro?: boolean }[] =
     }
   ];
 
-enum ClipperState {
-  Idle = "idle",
-  Clipping = "clipping",
-  Clipped = "clipped",
-  Error = "error"
-}
-
-const clipperButtonLabelMap: Record<ClipperState, string> = {
-  [ClipperState.Clipping]: "Clipping...",
-  [ClipperState.Clipped]: "Save clip",
-  [ClipperState.Error]: "Retry Clip",
-  [ClipperState.Idle]: "Start clip"
-};
-
 export function Main() {
   const [error, setError] = useState<string>();
   // const [colorMode, setColorMode] = useColorMode();
@@ -117,6 +98,7 @@ export function Main() {
   const [title, setTitle] = useState<string>();
   const [hasPermission, setHasPermission] = useState<boolean>(false);
   const [url, setUrl] = useState<string>();
+  const [clipNonce, setClipNonce] = useState(0);
   const [clipMode, setClipMode] = usePersistentState<ClipMode>(
     "clipMode",
     "simplified"
@@ -125,12 +107,10 @@ export function Main() {
     "clipArea",
     "article"
   );
+  const [isClipping, setIsClipping] = useState(false);
   const [note, setNote] = usePersistentState<ItemReference>("note");
   const [refs, setRefs] = usePersistentState<SelectedReference[]>("refs", []);
   const [clipData, setClipData] = useState<ClipData>();
-  const [clipperState, setClipperState] = useState<ClipperState>(
-    ClipperState.Idle
-  );
   const pageTitle = useRef<string>();
 
   useEffect(() => {
@@ -149,6 +129,7 @@ export function Main() {
 
   useEffect(() => {
     (async () => {
+      if (!clipArea || !clipMode) return;
       if (
         !isPremium &&
         (clipMode === "complete" || clipMode === "screenshot")
@@ -156,8 +137,25 @@ export function Main() {
         setClipMode("simplified");
         return;
       }
+
+      try {
+        setIsClipping(true);
+        setClipData(
+          await clip(clipArea, clipMode, {
+            ...DEFAULT_SETTINGS,
+            ...settings,
+            images: isPremium,
+            inlineImages: isPremium
+          })
+        );
+      } catch (e) {
+        console.error(e);
+        if (e instanceof Error) setError(e.message);
+      } finally {
+        setIsClipping(false);
+      }
     })();
-  }, [isPremium, clipArea, clipMode]);
+  }, [isPremium, clipArea, clipMode, clipNonce]);
 
   useEffect(() => {
     (async () => {
@@ -170,32 +168,6 @@ export function Main() {
     })();
   }, [settings]);
 
-  async function startClip() {
-    if (!clipArea || !clipMode || clipMode === "bookmark") return;
-
-    try {
-      setError(undefined);
-      setClipperState(ClipperState.Clipping);
-      setClipData(
-        await clip(clipArea, clipMode, {
-          ...DEFAULT_SETTINGS,
-          ...settings,
-          images: isPremium,
-          inlineImages: isPremium
-        })
-      );
-      setClipperState(ClipperState.Clipped);
-    } catch (e) {
-      console.error(e);
-      if (e instanceof Error) {
-        setError(e.message);
-      }
-      setClipperState(ClipperState.Error);
-    }
-  }
-
-  const isClipping = clipperState === ClipperState.Clipping;
-
   if (!hasPermission && !!settings?.corsProxy) {
     return (
       <FlexScrollContainer style={{ maxHeight: 560 }}>
@@ -269,15 +241,10 @@ export function Main() {
             key={item.id}
             variant="icon"
             onClick={() => {
-              setError(undefined);
-              setClipperState(ClipperState.Idle);
               setClipArea(item.id);
+              setClipNonce((s) => ++s);
             }}
-            disabled={
-              isClipping ||
-              clipperState === ClipperState.Clipped ||
-              clipMode === "bookmark"
-            }
+            disabled={isClipping}
             sx={{
               display: "flex",
               borderRadius: "default",
@@ -316,15 +283,10 @@ export function Main() {
             key={item.id}
             variant="icon"
             onClick={() => {
-              setError(undefined);
-              setClipperState(ClipperState.Idle);
               setClipMode(item.id);
+              setClipNonce((s) => ++s);
             }}
-            disabled={
-              isClipping ||
-              clipperState === ClipperState.Clipped ||
-              (item.pro && !isPremium)
-            }
+            disabled={isClipping || (item.pro && !isPremium)}
             sx={{
               display: "flex",
               borderRadius: "default",
@@ -351,58 +313,33 @@ export function Main() {
           </Button>
         ))}
 
-        {clipMode !== "bookmark" &&
-          clipData &&
-          clipData.data &&
-          !isClipping && (
-            <Flex sx={{ gap: 1, justifyContent: "space-between" }}>
-              <Text
-                variant="body"
-                sx={{
-                  flex: 1,
-                  mt: 1,
-                  bg: "shade",
-                  color: "accent",
-                  p: 1,
-                  border: "1px solid var(--accent)",
-                  borderRadius: "default",
-                  cursor: "pointer",
-                  ":hover": {
-                    filter: "brightness(80%)"
-                  }
-                }}
-                onClick={async () => {
-                  const winUrl = URL.createObjectURL(
-                    new Blob(["\ufeff", clipData.data], { type: "text/html" })
-                  );
-                  await browser.windows.create({
-                    url: winUrl
-                  });
-                }}
-              >
-                Clip done. Click here to preview.
-              </Text>
-              <Text
-                variant="body"
-                sx={{
-                  mt: 1,
-                  bg: "background-secondary",
-                  p: 1,
-                  borderRadius: "default",
-                  cursor: "pointer",
-                  ":hover": {
-                    filter: "brightness(80%)"
-                  }
-                }}
-                onClick={async () => {
-                  setClipData(undefined);
-                  setClipperState(ClipperState.Idle);
-                }}
-              >
-                Discard
-              </Text>
-            </Flex>
-          )}
+        {clipData && clipData.data && !isClipping && (
+          <Text
+            variant="body"
+            sx={{
+              mt: 1,
+              bg: "shade",
+              color: "accent",
+              p: 1,
+              border: "1px solid var(--accent)",
+              borderRadius: "default",
+              cursor: "pointer",
+              ":hover": {
+                filter: "brightness(80%)"
+              }
+            }}
+            onClick={async () => {
+              const winUrl = URL.createObjectURL(
+                new Blob(["\ufeff", clipData.data], { type: "text/html" })
+              );
+              await browser.windows.create({
+                url: winUrl
+              });
+            }}
+          >
+            Clip done. Click here to preview.
+          </Text>
+        )}
 
         {error && (
           <Text
@@ -420,7 +357,7 @@ export function Main() {
               }
             }}
             onClick={async () => {
-              await startClip();
+              setClipNonce((s) => ++s);
             }}
           >
             {ERROR_MAP[error] || error}
@@ -463,27 +400,9 @@ export function Main() {
         <Button
           variant="accent"
           sx={{ mt: 1 }}
-          disabled={isClipping}
+          disabled={!clipData}
           onClick={async () => {
-            if (
-              clipMode !== "bookmark" &&
-              (clipperState === ClipperState.Idle ||
-                clipperState === ClipperState.Error)
-            ) {
-              await startClip();
-              return;
-            }
-
-            if (!title || !clipArea || !clipMode || !url) return;
-
-            const data =
-              clipMode === "bookmark"
-                ? {
-                    data: createBookmark(url, title)
-                  }
-                : clipData;
-
-            if (!data) return;
+            if (!clipData || !title || !clipArea || !clipMode || !url) return;
 
             const notesnook = await connectApi(false);
             if (!notesnook) {
@@ -498,7 +417,7 @@ export function Main() {
               note,
               refs,
               pageTitle: pageTitle.current,
-              ...data
+              ...clipData
             });
 
             setClipData(undefined);
@@ -514,9 +433,7 @@ export function Main() {
             window.close();
           }}
         >
-          {clipMode === "bookmark"
-            ? "Save bookmark"
-            : clipperButtonLabelMap[clipperState]}
+          Save clip
         </Button>
 
         <Flex
@@ -591,11 +508,3 @@ export async function clip(
     settings
   });
 }
-
-function createBookmark(url: string, title: string) {
-  const a = document.createElement("a");
-  a.setAttribute("href", url);
-  a.setAttribute("title", title);
-  a.innerText = title;
-  return a.outerHTML;
-}

extensions/web-clipper/webpack.config.js

@@ -138,8 +138,7 @@ var options = {
   plugins: [
     new CleanWebpackPlugin({
       verbose: false,
-      dangerouslyAllowCleanPatternsOutsideProject: true,
-      dry: false
+      dangerouslyAllowCleanPatternsOutsideProject: true
     }),
     new webpack.ProgressPlugin(),
     // expose and write the allowed env vars on the compiled bundle

fastlane/metadata/android/en-US/changelogs/15384.txt

@@ -1,3 +0,0 @@
-- Minor bug fixes and improvements
-
-Thank you for using Notesnook!

fastlane/metadata/android/en-US/changelogs/15389.txt

@@ -1,3 +0,0 @@
-- Minor bug fixes and improvements
-
-Thank you for using Notesnook!

fastlane/metadata/android/en-US/changelogs/15394.txt

@@ -1,3 +0,0 @@
-- Minor bug fixes and improvements
-
-Thank you for using Notesnook!

package.json

@@ -104,10 +104,6 @@
           "run-ios",
           "build-ios",
           "build-android",
-          "build-android-debug",
-          "e2e-android-debug",
-          "e2e-android",
-          "e2e-ios",
           "release-android",
           "release-android-bundle",
           "release-ios",

packages/clipper/__tests__/example.spec.ts

@@ -60,6 +60,8 @@ for (const website of Websites) {
 
     await page.addScriptTag({ content: output, type: "text/javascript" });
 
+    await page.waitForLoadState("networkidle");
+
     // const originalScreenshot = await page.screenshot({
     //   fullPage: true,
     //   type: "jpeg"
@@ -71,12 +73,7 @@ for (const website of Websites) {
     // });
 
     const result = await page.evaluate(async () => {
-      const html = await window.clipper.clipPage(window.document, false, {
-        corsProxy: "https://cors.notesnook.com",
-        images: true,
-        inlineImages: true,
-        styles: true
-      });
+      const html = await window.clipper.clipPage(window.document, true, false);
       if (html) {
         return `\ufeff${html}`;
       }
@@ -104,6 +101,97 @@ for (const website of Websites) {
       maxDiffPixelRatio: 0.1
     });
 
-    // rmSync(tempFilePath, { force: true });
+    rmSync(tempFilePath, { force: true });
+  });
+}
+
+for (const website of Websites) {
+  const domain = new URL(website.url).hostname;
+  test(`clip as image ${domain} (${website.title})`, async ({ page }, info) => {
+    info.setTimeout(0);
+
+    await page.goto(website.url);
+
+    await page.addScriptTag({ content: output, type: "text/javascript" });
+
+    await page.waitForLoadState("networkidle");
+
+    // const originalScreenshot = await page.screenshot({
+    //   fullPage: true,
+    //   type: "jpeg"
+    // });
+
+    // expect(originalScreenshot).toMatchSnapshot({
+    //   name: `${slugify(website.title)}.jpg`,
+    //   maxDiffPixelRatio: 0.1
+    // });
+
+    const result = await page.evaluate(async () => {
+      const data = await window.clipper.clipScreenshot(undefined, "raw");
+      if (data) {
+        return base64ArrayBuffer(await data.arrayBuffer());
+      }
+
+      function base64ArrayBuffer(arrayBuffer) {
+        let base64 = "";
+        const encodings =
+          "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
+
+        const bytes = new Uint8Array(arrayBuffer);
+        const byteLength = bytes.byteLength;
+        const byteRemainder = byteLength % 3;
+        const mainLength = byteLength - byteRemainder;
+
+        let a, b, c, d;
+        let chunk;
+
+        // Main loop deals with bytes in chunks of 3
+        for (let i = 0; i < mainLength; i = i + 3) {
+          // Combine the three bytes into a single integer
+          chunk = (bytes[i] << 16) | (bytes[i + 1] << 8) | bytes[i + 2];
+
+          // Use bitmasks to extract 6-bit segments from the triplet
+          a = (chunk & 16515072) >> 18; // 16515072 = (2^6 - 1) << 18
+          b = (chunk & 258048) >> 12; // 258048   = (2^6 - 1) << 12
+          c = (chunk & 4032) >> 6; // 4032     = (2^6 - 1) << 6
+          d = chunk & 63; // 63       = 2^6 - 1
+
+          // Convert the raw binary segments to the appropriate ASCII encoding
+          base64 += encodings[a] + encodings[b] + encodings[c] + encodings[d];
+        }
+
+        // Deal with the remaining bytes and padding
+        if (byteRemainder == 1) {
+          chunk = bytes[mainLength];
+
+          a = (chunk & 252) >> 2; // 252 = (2^6 - 1) << 2
+
+          // Set the 4 least significant bits to zero
+          b = (chunk & 3) << 4; // 3   = 2^2 - 1
+
+          base64 += encodings[a] + encodings[b] + "==";
+        } else if (byteRemainder == 2) {
+          chunk = (bytes[mainLength] << 8) | bytes[mainLength + 1];
+
+          a = (chunk & 64512) >> 10; // 64512 = (2^6 - 1) << 10
+          b = (chunk & 1008) >> 4; // 1008  = (2^6 - 1) << 4
+
+          // Set the 2 least significant bits to zero
+          c = (chunk & 15) << 2; // 15    = 2^4 - 1
+
+          base64 += encodings[a] + encodings[b] + encodings[c] + "=";
+        }
+
+        return base64;
+      }
+      return null;
+    });
+
+    if (!result) throw new Error("Failed to clip page.");
+
+    expect(Buffer.from(result, "base64")).toMatchSnapshot({
+      name: `${slugify(website.title)}-image.png`,
+      maxDiffPixelRatio: 0.1
+    });
   });
 }

packages/clipper/package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "@notesnook/clipper",
   "version": "2.1.3",
-  "lockfileVersion": 3,
+  "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
@@ -11,7 +11,9 @@
       "license": "GPL-3.0-or-later",
       "dependencies": {
         "@mozilla/readability": "^0.4.2",
-        "hyperapp": "^2.0.22"
+        "css-what": "6.1.0",
+        "hyperapp": "^2.0.22",
+        "specificity": "^0.4.1"
       },
       "devDependencies": {
         "@playwright/test": "1.48.2",
@@ -20,9 +22,9 @@
       }
     },
     "node_modules/@emnapi/core": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.6.0.tgz",
-      "integrity": "sha512-zq/ay+9fNIJJtJiZxdTnXS20PllcYMX3OE23ESc4HK/bdYu3cOWYVhsOhVnXALfU/uqJIxn5NBPd9z4v+SfoSg==",
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.5.0.tgz",
+      "integrity": "sha512-sbP8GzB1WDzacS8fgNPpHlp6C9VZe+SJP3F90W9rLemaQj2PzIuTEl1qDOYQf58YIpyjViI24y9aPWCjEzY2cg==",
       "dev": true,
       "license": "MIT",
       "optional": true,
@@ -32,9 +34,9 @@
       }
     },
     "node_modules/@emnapi/runtime": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.6.0.tgz",
-      "integrity": "sha512-obtUmAHTMjll499P+D9A3axeJFlhdjOWdKUNs/U6QIGT7V5RjcUW1xToAzjvmgTSQhDbYn/NwfTRoJcQ2rNBxA==",
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.5.0.tgz",
+      "integrity": "sha512-97/BJ3iXHww3djw6hYIfErCZFee7qCtrneuLa20UXFCOTCfBM2cvQHjWJ2EG0s0MtdNwInarqCTz35i4wWXHsQ==",
       "dev": true,
       "license": "MIT",
       "optional": true,
@@ -113,18 +115,17 @@
       }
     },
     "node_modules/@mozilla/readability": {
-      "version": "0.4.4",
-      "resolved": "https://registry.npmjs.org/@mozilla/readability/-/readability-0.4.4.tgz",
-      "integrity": "sha512-MCgZyANpJ6msfvVMi6+A0UAsvZj//4OHREYUB9f2087uXHVoU+H+SWhuihvb1beKpM323bReQPRio0WNk2+V6g==",
-      "license": "Apache-2.0",
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/@mozilla/readability/-/readability-0.4.2.tgz",
+      "integrity": "sha512-48MJXzi4Dhy2fJ3lGjmwdEJKoMmn3oiYew9n/1OW6cZy78hAzRIyDJDBCGrg4PBFDyY4xos+H4LCFn5QVRDcfw==",
       "engines": {
-        "node": ">=14.0.0"
+        "node": ">=10.0.0"
       }
     },
     "node_modules/@napi-rs/wasm-runtime": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/@napi-rs/wasm-runtime/-/wasm-runtime-1.0.7.tgz",
-      "integrity": "sha512-SeDnOO0Tk7Okiq6DbXmmBODgOAb9dp9gjlphokTUxmt8U3liIP1ZsozBahH69j/RJv+Rfs6IwUKHTgQYJ/HBAw==",
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/@napi-rs/wasm-runtime/-/wasm-runtime-1.0.6.tgz",
+      "integrity": "sha512-DXj75ewm11LIWUk198QSKUTxjyRjsBwk09MuMk5DGK+GDUtyPhhEHOGP/Xwwj3DjQXXkivoBirmOnKrLfc0+9g==",
       "dev": true,
       "license": "MIT",
       "optional": true,
@@ -139,7 +140,6 @@
       "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.48.2.tgz",
       "integrity": "sha512-54w1xCWfXuax7dz4W2M9uw0gDyh+ti/0K/MxcCUxChFh37kkdxPdfZDw5QBbuPUJHr1CiHJ1hXgSs+GgeQc5Zw==",
       "dev": true,
-      "license": "Apache-2.0",
       "dependencies": {
         "playwright": "1.48.2"
       },
@@ -151,17 +151,17 @@
       }
     },
     "node_modules/@rsbuild/core": {
-      "version": "1.5.17",
-      "resolved": "https://registry.npmjs.org/@rsbuild/core/-/core-1.5.17.tgz",
-      "integrity": "sha512-tHa4puv+pEooQvSewu/K5sm270nkVPcP07Ioz1c+fbFCrFpiZWV5XumgznilS80097glUrieN+9xTbIHGXjThQ==",
+      "version": "1.5.13",
+      "resolved": "https://registry.npmjs.org/@rsbuild/core/-/core-1.5.13.tgz",
+      "integrity": "sha512-P+TCvZCVpBYZ3GDdnzR/tZKicE41khJIqIRlJYnEc9dwUfX1/eqRf8lA8yrsbB5iZbSfj1iOoH1N25cCQ3hhuA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@rspack/core": "1.5.8",
         "@rspack/lite-tapable": "~1.0.1",
         "@swc/helpers": "^0.5.17",
-        "core-js": "~3.46.0",
-        "jiti": "^2.6.1"
+        "core-js": "~3.45.1",
+        "jiti": "^2.6.0"
       },
       "bin": {
         "rsbuild": "bin/rsbuild.js"
@@ -384,9 +384,9 @@
       }
     },
     "node_modules/core-js": {
-      "version": "3.46.0",
-      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.46.0.tgz",
-      "integrity": "sha512-vDMm9B0xnqqZ8uSBpZ8sNtRtOdmfShrvT6h2TuQGLs0Is+cR0DYbj/KWP6ALVNbWPpqA/qPLoOuppJN07humpA==",
+      "version": "3.45.1",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.45.1.tgz",
+      "integrity": "sha512-L4NPsJlCfZsPeXukyzHFlg/i7IIVwHSItR0wg0FLNqYClJ4MQYTYLbC7EkjKYRLZF2iof2MUgN0EGy7MdQFChg==",
       "dev": true,
       "hasInstallScript": true,
       "license": "MIT",
@@ -395,13 +395,23 @@
         "url": "https://opencollective.com/core-js"
       }
     },
+    "node_modules/css-what": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/css-what/-/css-what-6.1.0.tgz",
+      "integrity": "sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==",
+      "engines": {
+        "node": ">= 6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/fb55"
+      }
+    },
     "node_modules/fsevents": {
       "version": "2.3.2",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
       "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
       "dev": true,
       "hasInstallScript": true,
-      "license": "MIT",
       "optional": true,
       "os": [
         "darwin"
@@ -413,8 +423,7 @@
     "node_modules/hyperapp": {
       "version": "2.0.22",
       "resolved": "https://registry.npmjs.org/hyperapp/-/hyperapp-2.0.22.tgz",
-      "integrity": "sha512-3uf9HjnjrhbfykowFNEObZewBEo4DXJIM+9FnGkiR9E4H2eh2f921SzMCMS69X5nN3A7KFfmZc9KCKh/7TQBFA==",
-      "license": "MIT"
+      "integrity": "sha512-3uf9HjnjrhbfykowFNEObZewBEo4DXJIM+9FnGkiR9E4H2eh2f921SzMCMS69X5nN3A7KFfmZc9KCKh/7TQBFA=="
     },
     "node_modules/jiti": {
       "version": "2.6.1",
@@ -431,7 +440,6 @@
       "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.48.2.tgz",
       "integrity": "sha512-NjYvYgp4BPmiwfe31j4gHLa3J7bD2WiBz8Lk2RoSsmX38SVIARZ18VYjxLjAcDsAhA+F4iSEXTSGgjua0rrlgQ==",
       "dev": true,
-      "license": "Apache-2.0",
       "dependencies": {
         "playwright-core": "1.48.2"
       },
@@ -450,7 +458,6 @@
       "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.48.2.tgz",
       "integrity": "sha512-sjjw+qrLFlriJo64du+EK0kJgZzoQPsabGF4lBvsid+3CNIZIYLgnMj9V6JY5VhM2Peh20DJWIVpVljLLnlawA==",
       "dev": true,
-      "license": "Apache-2.0",
       "bin": {
         "playwright-core": "cli.js"
       },
@@ -463,11 +470,18 @@
       "resolved": "https://registry.npmjs.org/slugify/-/slugify-1.6.6.tgz",
       "integrity": "sha512-h+z7HKHYXj6wJU+AnS/+IH8Uh9fdcX1Lrhg1/VMdf9PwoBQXFcXiAdsy2tSK0P6gKwJLXp02r90ahUCqHk9rrw==",
       "dev": true,
-      "license": "MIT",
       "engines": {
         "node": ">=8.0.0"
       }
     },
+    "node_modules/specificity": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/specificity/-/specificity-0.4.1.tgz",
+      "integrity": "sha512-1klA3Gi5PD1Wv9Q0wUoOQN1IWAuPu0D1U03ThXTr0cJ20+/iq2tHSDnK7Kk/0LXJ1ztUB2/1Os0wKmfyNgUQfg==",
+      "bin": {
+        "specificity": "bin/specificity"
+      }
+    },
     "node_modules/tslib": {
       "version": "2.8.1",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
@@ -475,5 +489,319 @@
       "dev": true,
       "license": "0BSD"
     }
+  },
+  "dependencies": {
+    "@emnapi/core": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.5.0.tgz",
+      "integrity": "sha512-sbP8GzB1WDzacS8fgNPpHlp6C9VZe+SJP3F90W9rLemaQj2PzIuTEl1qDOYQf58YIpyjViI24y9aPWCjEzY2cg==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "@emnapi/wasi-threads": "1.1.0",
+        "tslib": "^2.4.0"
+      }
+    },
+    "@emnapi/runtime": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.5.0.tgz",
+      "integrity": "sha512-97/BJ3iXHww3djw6hYIfErCZFee7qCtrneuLa20UXFCOTCfBM2cvQHjWJ2EG0s0MtdNwInarqCTz35i4wWXHsQ==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "@emnapi/wasi-threads": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@emnapi/wasi-threads/-/wasi-threads-1.1.0.tgz",
+      "integrity": "sha512-WI0DdZ8xFSbgMjR1sFsKABJ/C5OnRrjT06JXbZKexJGrDuPTzZdDYfFlsgcCXCyf+suG5QU2e/y1Wo2V/OapLQ==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "@module-federation/error-codes": {
+      "version": "0.18.0",
+      "resolved": "https://registry.npmjs.org/@module-federation/error-codes/-/error-codes-0.18.0.tgz",
+      "integrity": "sha512-Woonm8ehyVIUPXChmbu80Zj6uJkC0dD9SJUZ/wOPtO8iiz/m+dkrOugAuKgoiR6qH4F+yorWila954tBz4uKsQ==",
+      "dev": true
+    },
+    "@module-federation/runtime": {
+      "version": "0.18.0",
+      "resolved": "https://registry.npmjs.org/@module-federation/runtime/-/runtime-0.18.0.tgz",
+      "integrity": "sha512-+C4YtoSztM7nHwNyZl6dQKGUVJdsPrUdaf3HIKReg/GQbrt9uvOlUWo2NXMZ8vDAnf/QRrpSYAwXHmWDn9Obaw==",
+      "dev": true,
+      "requires": {
+        "@module-federation/error-codes": "0.18.0",
+        "@module-federation/runtime-core": "0.18.0",
+        "@module-federation/sdk": "0.18.0"
+      }
+    },
+    "@module-federation/runtime-core": {
+      "version": "0.18.0",
+      "resolved": "https://registry.npmjs.org/@module-federation/runtime-core/-/runtime-core-0.18.0.tgz",
+      "integrity": "sha512-ZyYhrDyVAhUzriOsVfgL6vwd+5ebYm595Y13KeMf6TKDRoUHBMTLGQ8WM4TDj8JNsy7LigncK8C03fn97of0QQ==",
+      "dev": true,
+      "requires": {
+        "@module-federation/error-codes": "0.18.0",
+        "@module-federation/sdk": "0.18.0"
+      }
+    },
+    "@module-federation/runtime-tools": {
+      "version": "0.18.0",
+      "resolved": "https://registry.npmjs.org/@module-federation/runtime-tools/-/runtime-tools-0.18.0.tgz",
+      "integrity": "sha512-fSga9o4t1UfXNV/Kh6qFvRyZpPp3EHSPRISNeyT8ZoTpzDNiYzhtw0BPUSSD8m6C6XQh2s/11rI4g80UY+d+hA==",
+      "dev": true,
+      "requires": {
+        "@module-federation/runtime": "0.18.0",
+        "@module-federation/webpack-bundler-runtime": "0.18.0"
+      }
+    },
+    "@module-federation/sdk": {
+      "version": "0.18.0",
+      "resolved": "https://registry.npmjs.org/@module-federation/sdk/-/sdk-0.18.0.tgz",
+      "integrity": "sha512-Lo/Feq73tO2unjmpRfyyoUkTVoejhItXOk/h5C+4cistnHbTV8XHrW/13fD5e1Iu60heVdAhhelJd6F898Ve9A==",
+      "dev": true
+    },
+    "@module-federation/webpack-bundler-runtime": {
+      "version": "0.18.0",
+      "resolved": "https://registry.npmjs.org/@module-federation/webpack-bundler-runtime/-/webpack-bundler-runtime-0.18.0.tgz",
+      "integrity": "sha512-TEvErbF+YQ+6IFimhUYKK3a5wapD90d90sLsNpcu2kB3QGT7t4nIluE25duXuZDVUKLz86tEPrza/oaaCWTpvQ==",
+      "dev": true,
+      "requires": {
+        "@module-federation/runtime": "0.18.0",
+        "@module-federation/sdk": "0.18.0"
+      }
+    },
+    "@mozilla/readability": {
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/@mozilla/readability/-/readability-0.4.2.tgz",
+      "integrity": "sha512-48MJXzi4Dhy2fJ3lGjmwdEJKoMmn3oiYew9n/1OW6cZy78hAzRIyDJDBCGrg4PBFDyY4xos+H4LCFn5QVRDcfw=="
+    },
+    "@napi-rs/wasm-runtime": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/@napi-rs/wasm-runtime/-/wasm-runtime-1.0.6.tgz",
+      "integrity": "sha512-DXj75ewm11LIWUk198QSKUTxjyRjsBwk09MuMk5DGK+GDUtyPhhEHOGP/Xwwj3DjQXXkivoBirmOnKrLfc0+9g==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "@emnapi/core": "^1.5.0",
+        "@emnapi/runtime": "^1.5.0",
+        "@tybys/wasm-util": "^0.10.1"
+      }
+    },
+    "@playwright/test": {
+      "version": "1.48.2",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.48.2.tgz",
+      "integrity": "sha512-54w1xCWfXuax7dz4W2M9uw0gDyh+ti/0K/MxcCUxChFh37kkdxPdfZDw5QBbuPUJHr1CiHJ1hXgSs+GgeQc5Zw==",
+      "dev": true,
+      "requires": {
+        "playwright": "1.48.2"
+      }
+    },
+    "@rsbuild/core": {
+      "version": "1.5.13",
+      "resolved": "https://registry.npmjs.org/@rsbuild/core/-/core-1.5.13.tgz",
+      "integrity": "sha512-P+TCvZCVpBYZ3GDdnzR/tZKicE41khJIqIRlJYnEc9dwUfX1/eqRf8lA8yrsbB5iZbSfj1iOoH1N25cCQ3hhuA==",
+      "dev": true,
+      "requires": {
+        "@rspack/core": "1.5.8",
+        "@rspack/lite-tapable": "~1.0.1",
+        "@swc/helpers": "^0.5.17",
+        "core-js": "~3.45.1",
+        "jiti": "^2.6.0"
+      }
+    },
+    "@rspack/binding": {
+      "version": "1.5.8",
+      "resolved": "https://registry.npmjs.org/@rspack/binding/-/binding-1.5.8.tgz",
+      "integrity": "sha512-/91CzhRl9r5BIQCgGsS7jA6MDbw1I2BQpbfcUUdkdKl2P79K3Zo/Mw/TvKzS86catwLaUQEgkGRmYawOfPg7ow==",
+      "dev": true,
+      "requires": {
+        "@rspack/binding-darwin-arm64": "1.5.8",
+        "@rspack/binding-darwin-x64": "1.5.8",
+        "@rspack/binding-linux-arm64-gnu": "1.5.8",
+        "@rspack/binding-linux-arm64-musl": "1.5.8",
+        "@rspack/binding-linux-x64-gnu": "1.5.8",
+        "@rspack/binding-linux-x64-musl": "1.5.8",
+        "@rspack/binding-wasm32-wasi": "1.5.8",
+        "@rspack/binding-win32-arm64-msvc": "1.5.8",
+        "@rspack/binding-win32-ia32-msvc": "1.5.8",
+        "@rspack/binding-win32-x64-msvc": "1.5.8"
+      }
+    },
+    "@rspack/binding-darwin-arm64": {
+      "version": "1.5.8",
+      "resolved": "https://registry.npmjs.org/@rspack/binding-darwin-arm64/-/binding-darwin-arm64-1.5.8.tgz",
+      "integrity": "sha512-spJfpOSN3f7V90ic45/ET2NKB2ujAViCNmqb0iGurMNQtFRq+7Kd+jvVKKGXKBHBbsQrFhidSWbbqy2PBPGK8g==",
+      "dev": true,
+      "optional": true
+    },
+    "@rspack/binding-darwin-x64": {
+      "version": "1.5.8",
+      "resolved": "https://registry.npmjs.org/@rspack/binding-darwin-x64/-/binding-darwin-x64-1.5.8.tgz",
+      "integrity": "sha512-YFOzeL1IBknBcri8vjUp43dfUBylCeQnD+9O9p0wZmLAw7DtpN5JEOe2AkGo8kdTqJjYKI+cczJPKIw6lu1LWw==",
+      "dev": true,
+      "optional": true
+    },
+    "@rspack/binding-linux-arm64-gnu": {
+      "version": "1.5.8",
+      "resolved": "https://registry.npmjs.org/@rspack/binding-linux-arm64-gnu/-/binding-linux-arm64-gnu-1.5.8.tgz",
+      "integrity": "sha512-UAWCsOnpkvy8eAVRo0uipbHXDhnoDq5zmqWTMhpga0/a3yzCp2e+fnjZb/qnFNYb5MeL0O1mwMOYgn1M3oHILQ==",
+      "dev": true,
+      "optional": true
+    },
+    "@rspack/binding-linux-arm64-musl": {
+      "version": "1.5.8",
+      "resolved": "https://registry.npmjs.org/@rspack/binding-linux-arm64-musl/-/binding-linux-arm64-musl-1.5.8.tgz",
+      "integrity": "sha512-GnSvGT4GjokPSD45cTtE+g7LgghuxSP1MRmvd+Vp/I8pnxTVSTsebRod4TAqyiv+l11nuS8yqNveK9qiOkBLWw==",
+      "dev": true,
+      "optional": true
+    },
+    "@rspack/binding-linux-x64-gnu": {
+      "version": "1.5.8",
+      "resolved": "https://registry.npmjs.org/@rspack/binding-linux-x64-gnu/-/binding-linux-x64-gnu-1.5.8.tgz",
+      "integrity": "sha512-XLxh5n/pzUfxsugz/8rVBv+Tx2nqEM+9rharK69kfooDsQNKyz7PANllBQ/v4svJ+W0BRHnDL4qXSGdteZeEjA==",
+      "dev": true,
+      "optional": true
+    },
+    "@rspack/binding-linux-x64-musl": {
+      "version": "1.5.8",
+      "resolved": "https://registry.npmjs.org/@rspack/binding-linux-x64-musl/-/binding-linux-x64-musl-1.5.8.tgz",
+      "integrity": "sha512-gE0+MZmwF+01p9/svpEESkzkLpBkVUG2o03YMpwXYC/maeRRhWvF8BJ7R3i/Ls/jFGSE87dKX5NbRLVzqksq/w==",
+      "dev": true,
+      "optional": true
+    },
+    "@rspack/binding-wasm32-wasi": {
+      "version": "1.5.8",
+      "resolved": "https://registry.npmjs.org/@rspack/binding-wasm32-wasi/-/binding-wasm32-wasi-1.5.8.tgz",
+      "integrity": "sha512-cfg3niNHeJuxuml1Vy9VvaJrI/5TakzoaZvKX2g5S24wfzR50Eyy4JAsZ+L2voWQQp1yMJbmPYPmnTCTxdJQBQ==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "@napi-rs/wasm-runtime": "^1.0.5"
+      }
+    },
+    "@rspack/binding-win32-arm64-msvc": {
+      "version": "1.5.8",
+      "resolved": "https://registry.npmjs.org/@rspack/binding-win32-arm64-msvc/-/binding-win32-arm64-msvc-1.5.8.tgz",
+      "integrity": "sha512-7i3ZTHFXKfU/9Jm9XhpMkrdkxO7lfeYMNVEGkuU5dyBfRMQj69dRgPL7zJwc2plXiqu9LUOl+TwDNTjap7Q36g==",
+      "dev": true,
+      "optional": true
+    },
+    "@rspack/binding-win32-ia32-msvc": {
+      "version": "1.5.8",
+      "resolved": "https://registry.npmjs.org/@rspack/binding-win32-ia32-msvc/-/binding-win32-ia32-msvc-1.5.8.tgz",
+      "integrity": "sha512-7ZPPWO11J+soea1+mnfaPpQt7GIodBM7A86dx6PbXgVEoZmetcWPrCF2NBfXxQWOKJ9L3RYltC4z+ZyXRgMOrw==",
+      "dev": true,
+      "optional": true
+    },
+    "@rspack/binding-win32-x64-msvc": {
+      "version": "1.5.8",
+      "resolved": "https://registry.npmjs.org/@rspack/binding-win32-x64-msvc/-/binding-win32-x64-msvc-1.5.8.tgz",
+      "integrity": "sha512-N/zXQgzIxME3YUzXT8qnyzxjqcnXudWOeDh8CAG9zqTCnCiy16SFfQ/cQgEoLlD9geQntV6jx2GbDDI5kpDGMQ==",
+      "dev": true,
+      "optional": true
+    },
+    "@rspack/core": {
+      "version": "1.5.8",
+      "resolved": "https://registry.npmjs.org/@rspack/core/-/core-1.5.8.tgz",
+      "integrity": "sha512-sUd2LfiDhqYVfvknuoz0+/c+wSpn693xotnG5g1CSWKZArbtwiYzBIVnNlcHGmuoBRsnj/TkSq8dTQ7gwfBroQ==",
+      "dev": true,
+      "requires": {
+        "@module-federation/runtime-tools": "0.18.0",
+        "@rspack/binding": "1.5.8",
+        "@rspack/lite-tapable": "1.0.1"
+      }
+    },
+    "@rspack/lite-tapable": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@rspack/lite-tapable/-/lite-tapable-1.0.1.tgz",
+      "integrity": "sha512-VynGOEsVw2s8TAlLf/uESfrgfrq2+rcXB1muPJYBWbsm1Oa6r5qVQhjA5ggM6z/coYPrsVMgovl3Ff7Q7OCp1w==",
+      "dev": true
+    },
+    "@swc/helpers": {
+      "version": "0.5.17",
+      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.17.tgz",
+      "integrity": "sha512-5IKx/Y13RsYd+sauPb2x+U/xZikHjolzfuDgTAl/Tdf3Q8rslRvC19NKDLgAJQ6wsqADk10ntlv08nPFw/gO/A==",
+      "dev": true,
+      "requires": {
+        "tslib": "^2.8.0"
+      }
+    },
+    "@tybys/wasm-util": {
+      "version": "0.10.1",
+      "resolved": "https://registry.npmjs.org/@tybys/wasm-util/-/wasm-util-0.10.1.tgz",
+      "integrity": "sha512-9tTaPJLSiejZKx+Bmog4uSubteqTvFrVrURwkmHixBo0G4seD0zUxp98E1DzUBJxLQ3NPwXrGKDiVjwx/DpPsg==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "core-js": {
+      "version": "3.45.1",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.45.1.tgz",
+      "integrity": "sha512-L4NPsJlCfZsPeXukyzHFlg/i7IIVwHSItR0wg0FLNqYClJ4MQYTYLbC7EkjKYRLZF2iof2MUgN0EGy7MdQFChg==",
+      "dev": true
+    },
+    "css-what": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/css-what/-/css-what-6.1.0.tgz",
+      "integrity": "sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw=="
+    },
+    "fsevents": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
+      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "dev": true,
+      "optional": true
+    },
+    "hyperapp": {
+      "version": "2.0.22",
+      "resolved": "https://registry.npmjs.org/hyperapp/-/hyperapp-2.0.22.tgz",
+      "integrity": "sha512-3uf9HjnjrhbfykowFNEObZewBEo4DXJIM+9FnGkiR9E4H2eh2f921SzMCMS69X5nN3A7KFfmZc9KCKh/7TQBFA=="
+    },
+    "jiti": {
+      "version": "2.6.1",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.6.1.tgz",
+      "integrity": "sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==",
+      "dev": true
+    },
+    "playwright": {
+      "version": "1.48.2",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.48.2.tgz",
+      "integrity": "sha512-NjYvYgp4BPmiwfe31j4gHLa3J7bD2WiBz8Lk2RoSsmX38SVIARZ18VYjxLjAcDsAhA+F4iSEXTSGgjua0rrlgQ==",
+      "dev": true,
+      "requires": {
+        "fsevents": "2.3.2",
+        "playwright-core": "1.48.2"
+      }
+    },
+    "playwright-core": {
+      "version": "1.48.2",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.48.2.tgz",
+      "integrity": "sha512-sjjw+qrLFlriJo64du+EK0kJgZzoQPsabGF4lBvsid+3CNIZIYLgnMj9V6JY5VhM2Peh20DJWIVpVljLLnlawA==",
+      "dev": true
+    },
+    "slugify": {
+      "version": "1.6.6",
+      "resolved": "https://registry.npmjs.org/slugify/-/slugify-1.6.6.tgz",
+      "integrity": "sha512-h+z7HKHYXj6wJU+AnS/+IH8Uh9fdcX1Lrhg1/VMdf9PwoBQXFcXiAdsy2tSK0P6gKwJLXp02r90ahUCqHk9rrw==",
+      "dev": true
+    },
+    "specificity": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/specificity/-/specificity-0.4.1.tgz",
+      "integrity": "sha512-1klA3Gi5PD1Wv9Q0wUoOQN1IWAuPu0D1U03ThXTr0cJ20+/iq2tHSDnK7Kk/0LXJ1ztUB2/1Os0wKmfyNgUQfg=="
+    },
+    "tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "dev": true
+    }
   }
 }

packages/clipper/package.json

@@ -33,6 +33,8 @@
   },
   "dependencies": {
     "@mozilla/readability": "^0.4.2",
-    "hyperapp": "^2.0.22"
+    "css-what": "6.1.0",
+    "hyperapp": "^2.0.22",
+    "specificity": "^0.4.1"
   }
 }

packages/clipper/src/clone.ts

@@ -16,29 +16,331 @@ GNU General Public License for more details.
 You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
+import { createImage, FetchOptions } from "./fetch.js";
+import { Filter } from "./types.js";
+import { uid } from "./utils.js";
 
-const INVALID_ELEMENTS = ["script", "noscript"];
+const SVGElements = [
+  "altGlyph",
+  "altGlyphDef",
+  "altGlyphItem",
+  "animate",
+  "animateColor",
+  "animateMotion",
+  "animateTransform",
+  "circle",
+  "clipPath",
+  "color-profile",
+  "cursor",
+  "defs",
+  "desc",
+  "ellipse",
+  "feBlend",
+  "feColorMatrix",
+  "feComponentTransfer",
+  "feComposite",
+  "feConvolveMatrix",
+  "feDiffuseLighting",
+  "feDisplacementMap",
+  "feDistantLight",
+  "feFlood",
+  "feFuncA",
+  "feFuncB",
+  "feFuncG",
+  "feFuncR",
+  "feGaussianBlur",
+  "feImage",
+  "feMerge",
+  "feMergeNode",
+  "feMorphology",
+  "feOffset",
+  "fePointLight",
+  "feSpecularLighting",
+  "feSpotLight",
+  "feTile",
+  "feTurbulence",
+  "filter",
+  "font-face",
+  "font-face-format",
+  "font-face-name",
+  "font-face-src",
+  "font-face-uri",
+  "foreignObject",
+  "g",
+  "glyph",
+  "glyphRef",
+  "hkern",
+  "image",
+  "line",
+  "linearGradient",
+  "marker",
+  "mask",
+  "metadata",
+  "missing-glyph",
+  "mpath",
+  "path",
+  "pattern",
+  "polygon",
+  "polyline",
+  "radialGradient",
+  "rect",
+  "set",
+  "stop",
+  "svg",
+  "switch",
+  "symbol",
+  "text",
+  "textPath",
+  "title",
+  "tref",
+  "tspan",
+  "use",
+  "view",
+  "vkern"
+].map((a) => a.toLowerCase());
 
-type CloneNodeOptions = {
-  images?: boolean;
+const INVALID_ELEMENTS = ["script"].map((a) => a.toLowerCase());
+
+type CloneProps = {
+  filter?: Filter;
+  root: boolean;
+  vector: boolean;
   styles?: boolean;
+  getElementStyles?: (element: HTMLElement) => CSSStyleDeclaration | undefined;
+  getPseudoElementStyles?: (
+    element: HTMLElement,
+    pseudoElement: string
+  ) => CSSStyleDeclaration | undefined;
+  fetchOptions?: FetchOptions;
+  images?: boolean;
 };
 
-export function cloneNode(node: HTMLElement, options: CloneNodeOptions) {
-  node = node.cloneNode(true) as HTMLElement;
-  if (!options.images) {
-    const images = node.getElementsByTagName("img");
-    for (const image of images) image.remove();
-  }
+export async function cloneNode(node: HTMLElement, options: CloneProps) {
+  const { root, filter } = options;
+  if (!root && filter && !filter(node)) return null;
 
-  if (!options.styles) {
-    const elements = node.querySelectorAll(
-      `button, form, select, input, textarea`
-    );
-    for (const element of elements) element.remove();
-  }
+  let clone = await makeNodeCopy(node, options);
 
-  const invalidElements = node.querySelectorAll(INVALID_ELEMENTS.join(","));
-  for (const element of invalidElements) element.remove();
-  return node;
+  if (!clone) return null;
+  clone = await cloneChildren(node, clone, options);
+
+  const processed = processClone(node, clone, options);
+  return processed;
+}
+
+function makeNodeCopy(original: HTMLElement, options?: CloneProps) {
+  try {
+    if (original instanceof HTMLCanvasElement && options?.images)
+      return createImage(original.toDataURL(), options?.fetchOptions);
+
+    if (!options?.images && original instanceof HTMLImageElement) return null;
+
+    if (
+      !options?.styles &&
+      (original instanceof HTMLButtonElement ||
+        original instanceof HTMLFormElement ||
+        original instanceof HTMLSelectElement ||
+        original instanceof HTMLInputElement ||
+        original instanceof HTMLTextAreaElement)
+    )
+      return null;
+
+    if (original.nodeType === Node.COMMENT_NODE) return null;
+
+    if (isInvalidElement(original)) return null;
+
+    if (original.nodeType !== Node.TEXT_NODE && !isSVGElement(original)) {
+      const { display, width, height } = window.getComputedStyle(original);
+      if (display === "none" || (width === "0px" && height === "0px"))
+        return null;
+
+      if (isCustomElement(original)) {
+        const isInline = display.includes("inline");
+        const element = document.createElement(isInline ? "span" : "div");
+        for (const attribute of original.attributes) {
+          element.setAttribute(attribute.name, attribute.value);
+        }
+        return element;
+      }
+    }
+
+    return original.cloneNode(false) as HTMLElement;
+  } catch (e) {
+    console.error("Failed to clone element", e);
+    return null;
+  }
+}
+
+function isCustomElement(element: HTMLElement) {
+  if (!element || !element.tagName) return false;
+  return (
+    !SVGElements.includes(element.tagName.toLowerCase()) &&
+    element.tagName.includes("-")
+  );
+}
+
+export function isSVGElement(element: HTMLElement) {
+  if (!element || !element.tagName) return false;
+  return SVGElements.includes(element.tagName.toLowerCase());
+}
+
+function isInvalidElement(element: HTMLElement) {
+  if (!element || !element.tagName) return false;
+  return INVALID_ELEMENTS.includes(element.tagName.toLowerCase());
+}
+
+async function cloneChildren(
+  original: HTMLElement,
+  clone: HTMLElement,
+  options: CloneProps
+) {
+  const children = original.childNodes;
+  if (children.length === 0) return clone;
+
+  await cloneChildrenInOrder(clone, children, options);
+  return clone;
+}
+
+async function cloneChildrenInOrder(
+  parent: HTMLElement,
+  childs: NodeListOf<ChildNode>,
+  options: CloneProps
+) {
+  for (const node of childs) {
+    const childClone = await cloneNode(node as HTMLElement, {
+      ...options,
+      root: false
+    });
+    if (childClone) parent.appendChild(childClone);
+  }
+}
+
+function processClone(
+  original: HTMLElement,
+  clone: HTMLElement,
+  options: CloneProps
+) {
+  if (!(clone instanceof Element)) return clone;
+
+  // if (clone instanceof HTMLElement) removeAttributes(clone);
+
+  if (options.styles) {
+    copyStyle(original, clone, options);
+    clonePseudoElements(original, clone, options);
+  }
+  fixRelativeUrl(clone);
+  copyUserInput(original, clone);
+  fixSvg(clone);
+  return clone;
+}
+
+function fixRelativeUrl(node: HTMLElement) {
+  const attributes = ["href", "src"];
+  const baseUrl = window.location.href;
+  for (const attribute of attributes) {
+    const url = node.getAttribute(attribute);
+    const relativeUrl = url?.startsWith("http") ? undefined : url;
+    if (relativeUrl) {
+      const absoluteUrl = new URL(relativeUrl, baseUrl).href;
+      node.setAttribute(attribute, absoluteUrl);
+    }
+  }
+}
+
+function copyFont(source: CSSStyleDeclaration, target: CSSStyleDeclaration) {
+  target.font = source.font;
+  target.fontFamily = source.fontFamily;
+  target.fontFeatureSettings = source.fontFeatureSettings;
+  target.fontKerning = source.fontKerning;
+  target.fontSize = source.fontSize;
+  target.fontStretch = source.fontStretch;
+  target.fontStyle = source.fontStyle;
+  target.fontVariant = source.fontVariant;
+  target.fontVariantCaps = source.fontVariantCaps;
+  target.fontVariantEastAsian = source.fontVariantEastAsian;
+  target.fontVariantLigatures = source.fontVariantLigatures;
+  target.fontVariantNumeric = source.fontVariantNumeric;
+  target.fontVariationSettings = source.fontVariationSettings;
+  target.fontWeight = source.fontWeight;
+}
+
+function copyStyle(
+  sourceElement: HTMLElement,
+  targetElement: HTMLElement,
+  options: CloneProps
+) {
+  const { getElementStyles } = options;
+  const sourceComputedStyles =
+    getElementStyles && getElementStyles(sourceElement);
+  if (!sourceComputedStyles) return;
+
+  targetElement.style.cssText = sourceComputedStyles.cssText;
+
+  if (sourceElement.tagName.toLowerCase() === "body") {
+    copyFont(getComputedStyle(sourceElement), targetElement.style);
+  }
+
+  const styles = targetElement.getAttribute("style");
+  if (styles) targetElement.setAttribute("style", minifyStyles(styles));
+}
+
+function clonePseudoElements(
+  original: HTMLElement,
+  clone: HTMLElement,
+  options: CloneProps
+) {
+  const { getPseudoElementStyles } = options;
+  let hasPseudoElements = false;
+
+  const styleElement = document.createElement("style");
+  const className = `pseudo--${uid()}`;
+
+  for (const element of [":before", ":after"]) {
+    const style =
+      (getPseudoElementStyles && getPseudoElementStyles(original, element)) ||
+      getComputedStyle(original, element);
+
+    if (!style.cssText) continue;
+
+    const selector = `.${className}:${element} {
+        ${style.cssText}
+      }`;
+
+    styleElement.appendChild(document.createTextNode(selector));
+    hasPseudoElements = true;
+  }
+
+  if (hasPseudoElements) {
+    clone.className = className;
+    clone.appendChild(styleElement);
+  }
+
+  return hasPseudoElements;
+}
+
+function copyUserInput(original: HTMLElement, clone: HTMLElement) {
+  if (
+    original instanceof HTMLInputElement ||
+    original instanceof HTMLTextAreaElement
+  )
+    clone.setAttribute("value", original.value);
+}
+
+function fixSvg(clone: Element) {
+  if (!(clone instanceof SVGElement)) return;
+  clone.setAttribute("xmlns", "http://www.w3.org/2000/svg");
+
+  // if (!(clone instanceof SVGRectElement)) return;
+  ["width", "height"].forEach(function (attribute) {
+    const value = clone.getAttribute(attribute);
+    if (!value || !!clone.style.getPropertyValue(attribute)) return;
+
+    clone.style.setProperty(attribute, value);
+  });
+}
+
+function minifyStyles(text: string) {
+  return text.replace(/(:?[:;])(:? +)/gm, (_full, sep) => {
+    return sep;
+  });
 }

packages/clipper/src/css-tokenizer.ts

@@ -0,0 +1,176 @@
+/*
+This file is part of the Notesnook project (https://notesnook.com/)
+
+Copyright (C) 2023 Streetwriters (Private) Limited
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU General Public License for more details.
+
+You should have received a copy of the GNU General Public License
+along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+const from = String.fromCharCode;
+
+function trim(value: string): string {
+  return value.trim();
+}
+
+function charat(value: string, index: number): number {
+  return value.charCodeAt(index) | 0;
+}
+
+function strlen(value: string): number {
+  return value.length;
+}
+
+function substr(value: string, begin: number, end: number): string {
+  return value.slice(begin, end);
+}
+
+function append<T>(value: T, array: T[]): T {
+  array.push(value);
+  return value;
+}
+
+let line = 1;
+let column = 1;
+let length = 0;
+let position = 0;
+let character = 0;
+let characters = "";
+
+function next(): number {
+  character = position < length ? charat(characters, position++) : 0;
+
+  if ((column++, character === 10)) (column = 1), line++;
+
+  return character;
+}
+
+function peek(): number {
+  return charat(characters, position);
+}
+
+function slice(begin: number, end: number): string {
+  return substr(characters, begin, end);
+}
+
+function token(type: number): number {
+  switch (type) {
+    // \0 \t \n \r \s whitespace token
+    case 0:
+    case 9:
+    case 10:
+    case 13:
+    case 32:
+      return 5;
+
+    // ! + , / > @ ~ isolate token
+    case 33:
+    case 42:
+    case 43:
+    case 44:
+    case 47:
+    case 62:
+    case 64:
+    case 126:
+    case 59: /* ; { } breakpoint token */
+    case 123:
+    case 125:
+      return 4;
+    // : accompanied token
+    case 58:
+      return 3;
+    // " ' ( [ opening delimit token
+    case 34:
+    case 39:
+    case 40:
+    case 91:
+      return 2;
+    // ) ] closing delimit token
+    case 41:
+    case 93:
+      return 1;
+  }
+
+  return 0;
+}
+
+function alloc(value: string): [] {
+  line = column = 1;
+  length = strlen((characters = value));
+  position = 0;
+  return [];
+}
+
+function dealloc<T>(value: T): T {
+  characters = "";
+  return value;
+}
+
+function delimit(type: number): string {
+  return trim(
+    slice(
+      position - 1,
+      delimiter(type === 91 ? type + 2 : type === 40 ? type + 1 : type)
+    )
+  );
+}
+
+export function tokenize(value: string): string[] {
+  return dealloc(tokenizer(alloc(value)));
+}
+
+function tokenizer(children: string[]): string[] {
+  while (next())
+    switch (token(character)) {
+      case 0:
+        append(identifier(position - 1), children);
+        break;
+      case 2:
+        append(delimit(character), children);
+        break;
+      default:
+        append(from(character), children);
+    }
+
+  return children;
+}
+
+function delimiter(type: number): number {
+  while (next())
+    switch (character) {
+      // ] ) " '
+      case type:
+        return position;
+      // " '
+      case 34:
+      case 39:
+        if (type !== 34 && type !== 39) delimiter(character);
+        break;
+      // (
+      case 40:
+        if (type === 41) delimiter(type);
+        break;
+      // \
+      case 92:
+        next();
+        break;
+    }
+
+  return position;
+}
+
+function identifier(index: number): string {
+  while (!token(peek())) next();
+
+  return slice(index, position);
+}

packages/clipper/src/domtoimage.ts

@@ -16,12 +16,13 @@ GNU General Public License for more details.
 You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
+import { cloneNode, isSVGElement } from "./clone.js";
 import { createImage, FetchOptions } from "./fetch.js";
 import { resolveAll } from "./fontfaces.js";
 import { inlineAllImages } from "./images.js";
 import { Options } from "./types.js";
-import { canvasToBlob, delay, height, width, isSVGElement } from "./utils.js";
-import { cloneNode } from "./clone.js";
+import { canvasToBlob, delay, escapeXhtml, height, width } from "./utils.js";
+import { cacheStylesheets, inlineStylesheets } from "./styles.js";
 
 // Default impl options
 const defaultOptions: Options = {
@@ -32,9 +33,23 @@ async function getInlinedNode(node: HTMLElement, options: Options) {
   const { fonts, images, stylesheets, inlineImages } =
     options.inlineOptions || {};
 
-  let clone = cloneNode(node, {
-    images,
-    styles: stylesheets
+  if (stylesheets) await inlineStylesheets(options.fetchOptions);
+
+  const documentStyles = getComputedStyle(document.documentElement);
+
+  const styleCache = stylesheets
+    ? await cacheStylesheets(documentStyles)
+    : undefined;
+
+  let clone = await cloneNode(node, {
+    styles: options.styles,
+    filter: options.filter,
+    root: true,
+    vector: !options.raster,
+    fetchOptions: options.fetchOptions,
+    getElementStyles: styleCache?.get,
+    getPseudoElementStyles: styleCache?.getPseudo,
+    images: images
   });
 
   if (!clone || clone instanceof Text) return;
@@ -47,72 +62,86 @@ async function getInlinedNode(node: HTMLElement, options: Options) {
   return clone;
 }
 
-function toPng(body: HTMLElement, head: HTMLHeadElement, options: Options) {
+async function toSvg(node: HTMLElement, options: Options) {
+  options.inlineOptions = {
+    fonts: true,
+    images: true,
+    stylesheets: true,
+    ...options.inlineOptions
+  };
+
+  let clone = await getInlinedNode(node, options);
+  if (!clone) return;
+
+  clone = applyOptions(clone, options);
+
+  return makeSvgDataUri(
+    clone,
+    options.width || width(node),
+    options.height || height(node)
+  );
+}
+
+function applyOptions(clone: HTMLElement, options: Options) {
+  if (options.backgroundColor)
+    clone.style.backgroundColor = options.backgroundColor;
+  if (options.width) clone.style.width = options.width + "px";
+  if (options.height) clone.style.height = options.height + "px";
+
+  return clone;
+}
+
+function toPixelData(node: HTMLElement, options: Options) {
+  options = options || {};
   options.raster = true;
-  return draw(body, head, options).then(function (canvas) {
+  return draw(node, options).then(function (canvas) {
+    return canvas
+      ?.getContext("2d")
+      ?.getImageData(0, 0, width(node), height(node)).data;
+  });
+}
+
+function toPng(node: HTMLElement, options: Options) {
+  options.raster = true;
+  return draw(node, options).then(function (canvas) {
     return canvas?.toDataURL();
   });
 }
 
-async function toJpeg(
-  body: HTMLElement,
-  head: HTMLHeadElement,
-  options: Options
-) {
+function toJpeg(node: HTMLElement, options: Options) {
   options.raster = true;
-
-  return draw(body, head, options).then((canvas) =>
-    canvas?.toDataURL("image/jpeg", options.quality || 1.0)
-  );
+  return draw(node, options).then(function (canvas) {
+    return canvas?.toDataURL("image/jpeg", options.quality || 1.0);
+  });
 }
 
-function toBlob(body: HTMLElement, head: HTMLHeadElement, options: Options) {
+function toBlob(node: HTMLElement, options: Options) {
   options.raster = true;
-  return draw(body, head, options).then(
-    (canvas) => canvas && canvasToBlob(canvas)
-  );
+  return draw(node, options).then((canvas) => canvas && canvasToBlob(canvas));
 }
 
-function toSvg(body: HTMLElement, head: HTMLHeadElement, options: Options) {
-  return makeSvg(
-    body,
-    head,
-    options.width || width(body),
-    options.height || height(body)
-  );
+function toCanvas(node: HTMLElement, options: Options) {
+  options.raster = true;
+  return draw(node, options);
 }
 
-async function draw(
-  body: HTMLElement,
-  head: HTMLHeadElement,
-  options: Options
-) {
+function draw(domNode: HTMLElement, options: Options) {
   options = { ...defaultOptions, ...options };
-  const uri = makeSvgDataUri(
-    makeSvg(
-      body,
-      head,
-      options.width || width(body),
-      options.height || height(body)
-    )
-  );
-
-  return createImage(uri, options.fetchOptions)
+  return toSvg(domNode, options)
+    .then((uri) => (uri ? createImage(uri, options.fetchOptions) : null))
     .then(delay(0))
     .then(function (image) {
-      if (!image) return null;
-
-      image.setAttribute("crossorigin", "anonymous");
-
       const scale = typeof options.scale !== "number" ? 1 : options.scale;
-      const canvas = newCanvas(body, scale, options);
+      const canvas = newCanvas(domNode, scale, options);
       const ctx = canvas?.getContext("2d");
       if (!ctx) return null;
       //   ctx.mozImageSmoothingEnabled = false;
       //   ctx.msImageSmoothingEnabled = false;
       ctx.imageSmoothingEnabled = false;
-      ctx.scale(scale, scale);
-      ctx.drawImage(image as HTMLImageElement, 0, 0);
+      if (image) {
+        ctx.scale(scale, scale);
+        ctx.drawImage(image, 0, 0);
+      }
       return canvas;
     });
 }
@@ -141,60 +170,52 @@ function embedFonts(node: HTMLElement, options?: FetchOptions) {
   });
 }
 
-function makeSvg(
-  body: HTMLElement,
-  head: HTMLHeadElement,
-  width: number,
-  height: number
-) {
-  body.setAttribute("xmlns", "http://www.w3.org/1999/xhtml");
-
-  /**
-   * We're removing all attributes that contain non-word characters
-   * Sometimes a webpage could have invalid html and that causes attribute names to break
-   * HTML is resilient to this but SVG is not and will throw an error, so we remove these attributes altogether
-   */
-  for (const element of body.querySelectorAll("img, svg, video, iframe")) {
-    const attributes = element.getAttributeNames();
-    for (const attribute of attributes) {
-      if (attribute.match(/\W/)) {
-        element.removeAttribute(attribute);
-      }
-    }
-  }
-
-  const xhtml = new XMLSerializer().serializeToString(body);
-
-  const xstyles = Array.from(head.getElementsByTagName("style"))
-    .map((s) => new XMLSerializer().serializeToString(s))
-    .join("\n");
-
+function makeSvgDataUri(node: HTMLElement, width: number, height: number) {
+  node.setAttribute("xmlns", "http://www.w3.org/1999/xhtml");
+  const xhtml = escapeXhtml(new XMLSerializer().serializeToString(node));
   const foreignObject =
     '<foreignObject x="0" y="0" width="100%" height="100%">' +
     xhtml +
     "</foreignObject>";
 
-  return (
+  const svgStr =
     '<svg xmlns="http://www.w3.org/2000/svg" width="' +
     width +
     '" height="' +
     height +
     '">' +
-    xstyles +
     foreignObject +
-    "</svg>"
-  );
+    "</svg>";
+
+  return "data:image/svg+xml;charset=utf-8," + svgStr;
 }
 
-function makeSvgDataUri(str: string) {
-  return "data:image/svg+xml; charset=utf8, " + encodeURIComponent(str);
-}
+export { toJpeg, toBlob, toCanvas, toPixelData, toPng, toSvg, getInlinedNode };
 
-export { toJpeg, toBlob, toPng, toSvg, getInlinedNode };
+const VALID_ATTRIBUTES = [
+  "src",
+  "href",
+  "title",
+  "style",
+  "srcset",
+  "sizes",
+  "width",
+  "height",
+  "target",
+  "rel"
+];
 
 function finalize(root: HTMLElement) {
   for (const element of root.querySelectorAll("*")) {
     if (!(element instanceof HTMLElement) || isSVGElement(element)) continue;
+    for (const attribute of Array.from(element.attributes)) {
+      if (attribute.name === "class" && element.className.includes("pseudo--"))
+        continue;
+
+      if (!VALID_ATTRIBUTES.includes(attribute.name)) {
+        element.removeAttribute(attribute.name);
+      }
+    }
 
     if (element instanceof HTMLAnchorElement) {
       element.href = element.href.startsWith("http")

packages/clipper/src/fetch.ts

@@ -39,10 +39,7 @@ export async function fetchResource(url: string, options?: FetchOptions) {
   });
 }
 
-export function createImage(
-  url: string,
-  options?: FetchOptions
-): Promise<HTMLImageElement | null> {
+export function createImage(url: string, options?: FetchOptions) {
   if (url === "data:,") return Promise.resolve(null);
   return new Promise<HTMLImageElement>(function (resolve, reject) {
     const image = new Image();
@@ -50,7 +47,7 @@ export function createImage(
     image.onload = function () {
       resolve(image);
     };
-    image.onerror = () => reject(new Error("Failed to render image."));
+    image.onerror = reject;
     image.src = constructUrl(url, options);
   });
 }

packages/clipper/src/images.ts

@@ -17,6 +17,7 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 import { FetchOptions, fetchResource } from "./fetch.js";
+import { inlineAll } from "./inliner.js";
 import { isDataUrl } from "./utils.js";
 
 async function inlineAllImages(root: HTMLElement, options?: FetchOptions) {
@@ -27,7 +28,15 @@ async function inlineAllImages(root: HTMLElement, options?: FetchOptions) {
     promises.push(inlineImage(image, options));
   }
 
-  await Promise.allSettled(promises).catch((e) => console.error(e));
+  const backgroundImageNodes = root.querySelectorAll(
+    `[style*="background-image:"],[style*="background:"]`
+  );
+  for (let i = 0; i < backgroundImageNodes.length; ++i) {
+    const image = backgroundImageNodes[i];
+    promises.push(inlineBackground(image as HTMLElement, options));
+  }
+
+  await Promise.all(promises).catch((e) => console.error(e));
 }
 export { inlineAllImages };
 
@@ -45,10 +54,26 @@ async function inlineImage(element: HTMLImageElement, options?: FetchOptions) {
     return element;
   }
 
-  if (element.parentElement?.tagName === "PICTURE") {
-    element.parentElement?.replaceWith(element);
-  }
+  return new Promise<HTMLImageElement | null>(function (resolve, reject) {
+    if (element.parentElement?.tagName === "PICTURE") {
+      element.parentElement?.replaceWith(element);
+    }
 
-  element.src = dataURL;
-  element.removeAttribute("srcset");
+    element.onload = () => resolve(element);
+    // for any image with invalid src(such as <img src />), just ignore it
+    element.onerror = (e) => reject(e);
+    element.src = dataURL;
+    element.removeAttribute("srcset");
+  });
+}
+
+async function inlineBackground(
+  backgroundNode: HTMLElement,
+  options?: FetchOptions
+) {
+  const background = backgroundNode.style.getPropertyValue("background-image");
+  if (!background) return backgroundNode;
+  const inlined = await inlineAll(background, options);
+  backgroundNode.style.setProperty("background-image", inlined);
+  return backgroundNode;
 }

packages/clipper/src/index.global.ts

@@ -26,7 +26,7 @@ declare global {
   };
 }
 
-globalThis.Clipper = {
+global.Clipper = {
   clipArticle,
   clipPage
 };

packages/clipper/src/index.ts

@@ -20,10 +20,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import { Readability } from "@mozilla/readability";
 import { injectCss } from "./utils.js";
 import { app, h, text } from "hyperapp";
-import { getInlinedNode, toBlob, toJpeg, toPng, toSvg } from "./domtoimage.js";
+import { getInlinedNode, toBlob, toJpeg, toPng } from "./domtoimage.js";
 import { Config, InlineOptions } from "./types.js";
 import { FetchOptions } from "./fetch.js";
-import { addStylesToHead } from "./styles.js";
 
 type ReadabilityEnhanced = Readability<string> & {
   PRESENTATIONAL_ATTRIBUTES: string[];
@@ -85,45 +84,36 @@ async function clipArticle(
 }
 
 async function clipScreenshot<
-  TOutputFormat extends "jpeg" | "png" | "raw" | "svg",
-  TOutput extends TOutputFormat extends "jpeg" | "png" | "svg"
+  TOutputFormat extends "jpeg" | "png" | "raw",
+  TOutput extends TOutputFormat extends "jpeg"
+    ? string
+    : TOutputFormat extends "png"
     ? string
     : Blob | undefined
 >(
   target?: HTMLElement,
   output: TOutputFormat = "jpeg" as TOutputFormat,
   config?: Config
-): Promise<TOutput | null> {
-  const fetchOptions = resolveFetchOptions(config);
+): Promise<TOutput> {
+  const screenshotTarget = target || document.body;
 
-  const { body, head } = await getPage(document, config, false);
-  if (!body || !head) return null;
-
-  const func =
-    output === "jpeg"
-      ? toJpeg
-      : output === "png"
-      ? toPng
-      : output === "svg"
-      ? toSvg
-      : toBlob;
-  const screenshot = await func(body, head, {
+  const func = output === "jpeg" ? toJpeg : output === "png" ? toPng : toBlob;
+  const screenshot = await func(screenshotTarget, {
     quality: 1,
     backgroundColor: "white",
     width: document.body.scrollWidth,
     height: document.body.scrollHeight,
-    fetchOptions,
+    fetchOptions: resolveFetchOptions(config),
     inlineOptions: {
-      inlineImages: true,
       fonts: true,
       images: true,
       stylesheets: true
-    }
+    },
+    styles: true
   });
 
   if (output === "jpeg" || output === "png")
     return `<img width="${document.body.scrollWidth}px" height="${document.body.scrollHeight}px" src="${screenshot}" />` as TOutput;
-  else if (output === "svg") return screenshot as TOutput;
   else return screenshot as TOutput;
 }
 
@@ -202,11 +192,7 @@ function enterNodeSelectionMode(doc: Document, config?: Config) {
           `.${CLASSES.nodeSelected}`
         );
 
-        const { head } = await getPage(document, config, false);
-        const html = document.createElement("html");
-        html.append(head!);
-        const body = document.createElement("body");
-        html.append(body);
+        const div = document.createElement("div");
         for (const node of selectedNodes) {
           node.classList.remove(CLASSES.nodeSelected);
           const inlined = await getInlinedNode(node as HTMLElement, {
@@ -219,9 +205,9 @@ function enterNodeSelectionMode(doc: Document, config?: Config) {
             }
           });
           if (!inlined) continue;
-          body.appendChild(inlined);
+          div.appendChild(inlined);
         }
-        resolve(html?.outerHTML);
+        resolve(div?.outerHTML);
       },
       () => reject("Cancelled.")
     );
@@ -468,16 +454,16 @@ async function getPage(
   config?: Config,
   onlyVisible = false
 ) {
-  const fetchOptions = resolveFetchOptions(config);
   const body = await getInlinedNode(document.body, {
     raster: true,
-    fetchOptions,
+    fetchOptions: resolveFetchOptions(config),
     inlineOptions: {
       fonts: false,
       inlineImages: config?.inlineImages,
       images: config?.images,
       stylesheets: config?.styles
     },
+    styles: config?.styles,
     filter: (node) => {
       return !onlyVisible || isElementInViewport(node);
     }
@@ -490,16 +476,6 @@ async function getPage(
   title.innerText = document.title;
   head.appendChild(title);
 
-  if (config?.styles) {
-    await addStylesToHead(head, fetchOptions);
-  }
-
-  for (const [name, value] of Object.entries(
-    toAttributes(document.documentElement)
-  )) {
-    body.setAttribute(name, value);
-  }
-
   return {
     body,
     head
@@ -516,13 +492,3 @@ function resolveFetchOptions(config?: Config): FetchOptions | undefined {
       }
     : undefined;
 }
-
-function toAttributes(element: HTMLElement) {
-  const attributes: Record<string, string> = {};
-  for (const { name } of element.attributes) {
-    const value = element.getAttribute(name);
-    if (!value) continue;
-    attributes[name] = value;
-  }
-  return attributes;
-}

packages/clipper/src/inliner.ts

@@ -16,7 +16,7 @@ GNU General Public License for more details.
 You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
-import { constructUrl, FetchOptions, fetchResource } from "./fetch.js";
+import { FetchOptions, fetchResource } from "./fetch.js";
 import { isDataUrl, resolveUrl, escape } from "./utils.js";
 
 const URL_REGEX = /url\(['"]?([^'"]+?)['"]?\)/g;
@@ -40,37 +40,32 @@ async function inline(
   string: string,
   url: string,
   options?: FetchOptions,
-  baseUrl?: string,
-  onlyResolve?: boolean
+  baseUrl?: string
 ) {
-  const resolvedUrl = baseUrl ? resolveUrl(url, baseUrl) : url;
-  const dataUrl = onlyResolve
-    ? constructUrl(resolvedUrl, options)
-    : await fetchResource(resolvedUrl, options).catch(() =>
-        constructUrl(resolvedUrl, options)
-      );
-  return string.replace(url, dataUrl || resolvedUrl);
+  url = baseUrl ? resolveUrl(url, baseUrl) : url;
+  const dataUrl = await fetchResource(url, options);
+  // const dataUrl = dataAsUrl(data, mimeType(url));
+  return string.replace(urlAsRegex(url), "$1" + dataUrl + "$3");
+}
+
+function urlAsRegex(urlValue: string) {
+  return new RegExp("(url\\(['\"]?)(" + escape(urlValue) + ")(['\"]?\\))", "g");
 }
 
 async function inlineAll(
   string: string,
   options?: FetchOptions,
-  baseUrl?: string,
-  onlyResolve?: boolean
+  baseUrl?: string
 ) {
   if (!shouldProcess(string)) return string;
 
   const urls = readUrls(string);
 
+  let prefix = string;
   for (const url of urls) {
-    string = await inline(string, url, options, baseUrl, onlyResolve).catch(
-      (e) => {
-        console.error(e);
-        return string;
-      }
-    );
+    prefix = await inline(prefix, url, options, baseUrl);
   }
-  return string;
+  return prefix;
 }
 
 export { shouldProcess, inlineAll, readUrls };

packages/clipper/src/styles.ts

@@ -17,7 +17,64 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 import { constructUrl, FetchOptions } from "./fetch.js";
-import { inlineAll } from "./inliner.js";
+import { compare, calculate, SpecificityArray } from "specificity";
+import { tokenize } from "./css-tokenizer.js";
+import { stringify, parse, SelectorType } from "css-what";
+import { safeQuerySelectorAll } from "./utils.js";
+
+const SHORTHANDS = [
+  "animation",
+  "background",
+  "border",
+  "border-block-end",
+  "border-block-start",
+  "border-bottom",
+  "border-color",
+  "border-image",
+  "border-inline-end",
+  "border-inline-start",
+  "border-left",
+  "border-radius",
+  "border-right",
+  "border-style",
+  "border-top",
+  "border-width",
+  "column-rule",
+  "columns",
+  "contain-intrinsic-size",
+  "flex",
+  "flex-flow",
+  "font",
+  "gap",
+  "grid",
+  "grid-area",
+  "grid-column",
+  "grid-row",
+  "grid-template",
+  "grid-gap",
+  "list-style",
+  "margin",
+  "mask",
+  "offset",
+  "outline",
+  "overflow",
+  "padding",
+  "place-content",
+  "place-items",
+  "place-self",
+  "scroll-margin",
+  "scroll-padding",
+  "text-decoration",
+  "text-emphasis",
+  "transition"
+];
+
+export async function inlineStylesheets(options?: FetchOptions) {
+  for (const sheet of document.styleSheets) {
+    if (await skipStyleSheet(sheet, options)) continue;
+  }
+  await resolveImports(options);
+}
 
 async function resolveImports(options?: FetchOptions) {
   for (const sheet of document.styleSheets) {
@@ -39,9 +96,7 @@ async function resolveImports(options?: FetchOptions) {
       }
     }
 
-    if (sheet.cssRules.length !== 0) {
-      for (const ruleIndex of rulesToDelete) sheet.deleteRule(ruleIndex);
-    }
+    for (const ruleIndex of rulesToDelete) sheet.deleteRule(ruleIndex);
   }
 }
 
@@ -50,7 +105,7 @@ async function downloadStylesheet(href: string, options?: FetchOptions) {
     const style = document.createElement("style");
     const response = await fetch(constructUrl(href, options));
     if (!response.ok) return false;
-    style.innerHTML = await response.text();
+    style.innerText = await response.text();
     style.setAttribute("href", href);
     return style;
   } catch (e) {
@@ -58,129 +113,318 @@ async function downloadStylesheet(href: string, options?: FetchOptions) {
   }
 }
 
+type StyleableElement = HTMLElement | SVGElement;
+type BaseStyle = {
+  rule: CSSStyleDeclaration;
+  href: URL | null;
+};
+type SpecifiedStyle = BaseStyle & {
+  specificity: SpecificityArray;
+};
+type PseudoElementStyle = BaseStyle & {
+  pseudoElement: string;
+};
+type CSSStyledElements = Map<StyleableElement, SpecifiedStyle[]>;
+type CSSPseudoElements = Map<StyleableElement, PseudoElementStyle[]>;
+
+export async function cacheStylesheets(documentStyles: CSSStyleDeclaration) {
+  const styledElements: CSSStyledElements = new Map();
+  const styledPseudoElements: CSSPseudoElements = new Map();
+
+  for (const sheet of document.styleSheets) {
+    if (await skipStyleSheet(sheet)) continue;
+    let href = sheet.href || undefined;
+    if (!href && sheet.ownerNode instanceof HTMLElement)
+      href = sheet.ownerNode.getAttribute("href") || undefined;
+
+    walkRules(
+      sheet.cssRules,
+      documentStyles,
+      styledElements,
+      styledPseudoElements,
+      href
+    );
+  }
+
+  return {
+    getPseudo(element: StyleableElement, pseudoElement: string) {
+      const styles = styledPseudoElements
+        .get(element)
+        ?.filter((s) => s.pseudoElement.includes(pseudoElement));
+      if (!styles || !styles.length) return;
+
+      return getElementStyles(element, styles, documentStyles);
+    },
+    get(element: StyleableElement) {
+      const styles = styledElements.get(element);
+      if (!styles) return;
+
+      const allStyles = styles.sort((a, b) =>
+        compare(a.specificity, b.specificity)
+      );
+      allStyles.push({
+        rule: element.style,
+        specificity: [0, 0, 0, 0],
+        href: null
+      });
+
+      return getElementStyles(element, allStyles, documentStyles);
+    }
+  };
+}
+
+function walkRules(
+  cssRules: CSSRuleList,
+  documentStyles: CSSStyleDeclaration,
+  styled: CSSStyledElements,
+  pseudoElements: CSSPseudoElements,
+  href?: string
+) {
+  for (const rule of cssRules) {
+    if (rule instanceof CSSStyleRule) {
+      if (isPseudoSelector(rule.selectorText)) {
+        const selectors = parsePseudoSelector(rule.selectorText);
+
+        for (const selector of selectors) {
+          if (!selector || !selector.selector.trim()) continue;
+          const elements = safeQuerySelectorAll(
+            document,
+            selector.selector
+          ) as NodeListOf<StyleableElement>;
+
+          for (const element of elements) {
+            if (
+              !(element instanceof HTMLElement) &&
+              !(element instanceof SVGElement)
+            )
+              continue;
+
+            const styles: PseudoElementStyle[] =
+              pseudoElements.get(element) || [];
+            pseudoElements.set(element, styles);
+
+            styles.push({
+              rule: rule.style,
+              href: getBaseUrl(href),
+              pseudoElement: selector.pseudoElement
+            });
+          }
+        }
+      }
+
+      const elements = safeQuerySelectorAll(
+        document,
+        rule.selectorText
+      ) as NodeListOf<StyleableElement>;
+
+      for (const element of elements) {
+        if (
+          !(element instanceof HTMLElement) &&
+          !(element instanceof SVGElement)
+        )
+          continue;
+
+        const parts = rule.selectorText.split(",");
+        const styles: SpecifiedStyle[] = styled.get(element) || [];
+        styled.set(element, styles);
+
+        for (const part of parts) {
+          try {
+            const specificity = calculate(part)[0];
+            styles.push({
+              specificity: specificity.specificityArray,
+              rule: rule.style,
+              href: getBaseUrl(href)
+            });
+            break;
+          } catch (e) {
+            console.error(e, href && getBaseUrl(href));
+            // ignore
+          }
+        }
+      }
+    } else if (
+      rule instanceof CSSMediaRule &&
+      window.matchMedia(rule.conditionText).matches
+    ) {
+      walkRules(rule.cssRules, documentStyles, styled, pseudoElements, href);
+    } else if (
+      rule instanceof CSSSupportsRule &&
+      CSS.supports(rule.conditionText)
+    ) {
+      walkRules(rule.cssRules, documentStyles, styled, pseudoElements, href);
+    }
+  }
+}
+
+function getElementStyles(
+  element: StyleableElement,
+  styles: BaseStyle[],
+  documentStyles: CSSStyleDeclaration
+) {
+  const newStyles = newStyleDeclaration();
+  const computedStyle = lazyComputedStyle(element);
+  const overrides = ["display"];
+
+  for (const style of styles) {
+    for (const property of [...style.rule, ...SHORTHANDS]) {
+      let value = style.rule.getPropertyValue(property);
+      if (overrides.includes(property))
+        value = computedStyle.style.getPropertyValue(property);
+
+      if (value.trim()) {
+        setStyle(
+          newStyles,
+          property,
+          value,
+          (variable) => {
+            return (
+              computedStyle.style.getPropertyValue(variable) ||
+              documentStyles.getPropertyValue(variable)
+            );
+          },
+          (url) => {
+            console.log("resolving url", url, style.href);
+            if (url.startsWith("data:") || !style.href) return url;
+            console.log("resolving url", url, style.href.href);
+            if (url.startsWith("/"))
+              return new URL(`${style.href.origin}${url}`).href;
+
+            return new URL(`${style.href.href}${url}`).href;
+          },
+          style.rule.getPropertyPriority(property)
+        );
+      }
+    }
+  }
+  return newStyles;
+}
+
+function setStyle(
+  target: CSSStyleDeclaration,
+  property: string,
+  value: string,
+  get: (variable: string) => string,
+  resolveUrl: (variable: string) => string,
+  priority?: string
+) {
+  value = resolveCssVariables(value, get);
+  value = resolveCssUrl(value, resolveUrl);
+
+  target.setProperty(property, value, priority);
+}
+
+function newStyleDeclaration() {
+  const sheet = new CSSStyleSheet();
+  sheet.insertRule(".dummy{}");
+  return (sheet.cssRules[0] as CSSStyleRule).style;
+}
+
+function lazyComputedStyle(element: StyleableElement) {
+  let computedStyle: CSSStyleDeclaration | undefined;
+
+  return Object.defineProperty({}, "style", {
+    get: () => {
+      if (!computedStyle) computedStyle = getComputedStyle(element);
+      return computedStyle;
+    }
+  }) as { style: CSSStyleDeclaration };
+}
+
 async function skipStyleSheet(sheet: CSSStyleSheet, options?: FetchOptions) {
   try {
     sheet.cssRules.length;
   } catch (_e) {
     const node = sheet.ownerNode;
     if (sheet.href && node instanceof HTMLLinkElement) {
-      if (isStylesheetForPrint(node)) return true;
-
       const styleNode = await downloadStylesheet(node.href, options);
       if (styleNode) node.replaceWith(styleNode);
     }
     return true;
   }
 
-  return isStylesheetForPrint(sheet);
-}
-
-function isStylesheetForPrint(sheet: CSSStyleSheet | HTMLLinkElement) {
-  const mediaText =
-    typeof sheet.media === "string" ? sheet.media : sheet.media.mediaText;
-  return mediaText
+  return sheet.media.mediaText
     .split(",")
     .map((t) => t.trim())
     .includes("print");
 }
 
-export async function addStylesToHead(
-  head: HTMLHeadElement,
-  options?: FetchOptions
-) {
-  await resolveImports(options);
+function resolveCssVariables(css: string, get: (variable: string) => string) {
+  const tokens = tokenize(css);
+  const finalTokens: string[] = [];
+  for (let i = 0; i < tokens.length; ++i) {
+    const token = tokens[i];
+    if (token === "var") {
+      const args = tokenize(tokens[++i].slice(1, -1));
+      const [variable, operator, space, ...restArgs] = args;
 
-  for (const sheet of document.styleSheets) {
-    if (isStylesheetForPrint(sheet)) continue;
-
-    const href =
-      sheet.href && sheet.ownerNode instanceof HTMLLinkElement
-        ? sheet.ownerNode.href
-        : sheet.ownerNode instanceof HTMLStyleElement
-        ? sheet.ownerNode.getAttribute("href")
-        : null;
-    if (href) {
-      const result = await downloadStylesheet(href, options);
-      if (!result) continue;
-      const cssStylesheet = new CSSStyleSheet();
-      await cssStylesheet.replace(result.innerHTML);
-      await inlineBackgroundImages(cssStylesheet, options);
-      const toAppend = rulesToStyleNode(cssStylesheet.cssRules);
-      head.appendChild(toAppend);
-      continue;
-    }
-
-    if (sheet.cssRules.length > 0) {
-      await inlineBackgroundImages(sheet, options);
-      const styleNode = rulesToStyleNode(sheet.cssRules);
-      head.appendChild(styleNode);
-      continue;
-    }
-
-    if (sheet.ownerNode instanceof HTMLStyleElement) {
-      head.appendChild(sheet.ownerNode.cloneNode(true));
-      continue;
-    }
-  }
-}
-
-function rulesToStyleNode(cssRules: CSSRuleList) {
-  const cssText = Array.from(cssRules)
-    .map((r) => r.cssText)
-    .reduce((acc, text) => acc + text, "");
-  const style = document.createElement("style");
-  style.innerHTML = cssText;
-  return style;
-}
-
-async function inlineBackgroundImages(
-  sheet: CSSStyleSheet,
-  options?: FetchOptions
-) {
-  const promises: Promise<void>[] = [];
-  for (const rule of sheet.cssRules) {
-    if (rule.type === CSSRule.STYLE_RULE) {
-      promises.push(processStyleRule(sheet, rule as CSSStyleRule, options));
-    } else if (rule.type === CSSRule.MEDIA_RULE) {
-      const mediaRule = rule as CSSMediaRule;
-      const mediaMatches = window.matchMedia(mediaRule.media.mediaText).matches;
-      for (const innerRule of mediaRule.cssRules) {
-        if (innerRule && innerRule.type === CSSRule.STYLE_RULE) {
-          promises.push(
-            processStyleRule(
-              sheet,
-              innerRule as CSSStyleRule,
-              options,
-              mediaMatches
-            )
-          );
-        }
+      const value = get(variable);
+      if (value) {
+        finalTokens.push(value);
+      } else if (operator && restArgs.length <= 1) {
+        finalTokens.push(restArgs[0] || space);
+      } else if (operator && restArgs.length === 2) {
+        finalTokens.push(resolveCssVariables(restArgs.join(""), get));
       }
-    } else if (rule.type === CSSRule.SUPPORTS_RULE) {
-      const supportsRule = rule as CSSSupportsRule;
-      for (const innerRule of supportsRule.cssRules) {
-        if (innerRule && innerRule.type === CSSRule.STYLE_RULE) {
-          promises.push(
-            processStyleRule(sheet, innerRule as CSSStyleRule, options, false)
-          );
-        }
-      }
-    }
+    } else if (token.startsWith("(") && token.endsWith(")")) {
+      finalTokens.push("(", resolveCssVariables(token.slice(1, -1), get), ")");
+    } else finalTokens.push(token);
   }
-  await Promise.allSettled(promises);
+  return finalTokens.join("");
 }
 
-async function processStyleRule(
-  sheet: CSSStyleSheet,
-  rule: CSSStyleRule,
-  options?: FetchOptions,
-  inline = true
-) {
-  const baseUrl = sheet.href || document.location.href;
-  for (const property of rule.style) {
-    const oldValue = rule.style.getPropertyValue(property);
-    if (!oldValue) continue;
-    const resolved = await inlineAll(oldValue, options, baseUrl, !inline);
-    rule.style.setProperty(property, resolved);
+function resolveCssUrl(css: string, get: (url: string) => string) {
+  const tokens = tokenize(css);
+  const finalTokens: string[] = [];
+  for (let i = 0; i < tokens.length; ++i) {
+    const token = tokens[i];
+    if (token === "url" && !tokens[i + 1].startsWith("(data")) {
+      const url = tokens[++i].slice(2, -2);
+      const resolvedUrl = get(url);
+      if (resolvedUrl) {
+        finalTokens.push(token);
+        finalTokens.push('("');
+        finalTokens.push(resolvedUrl);
+        finalTokens.push('")');
+      }
+    } else finalTokens.push(token);
   }
+  return finalTokens.join("");
+}
+
+function getBaseUrl(href?: string | null) {
+  if (!href) return null;
+  if (href.startsWith("/")) href = `${document.location.origin}${href}`;
+  const url = new URL(href);
+  const basepath = url.pathname.split("/").slice(0, -1).join("/");
+  return new URL(`${url.origin}${basepath}/`);
+}
+
+function isPseudoSelector(text: string) {
+  return (
+    text.includes(":before") ||
+    text.includes(":after") ||
+    text.includes("::after") ||
+    text.includes("::before")
+  );
+}
+
+function parsePseudoSelector(selector: string) {
+  const output = [];
+  const selectors = parse(selector);
+  for (const part of selectors) {
+    const pseduoElementIndex = part.findIndex(
+      (s) =>
+        (s.type === SelectorType.Pseudo ||
+          s.type === SelectorType.PseudoElement) &&
+        (s.name === "after" || s.name === "before")
+    );
+    if (pseduoElementIndex <= -1) continue;
+
+    output.push({
+      selector: stringify([part.slice(0, pseduoElementIndex)]),
+      pseudoElement: stringify([part.slice(pseduoElementIndex)])
+    });
+  }
+  return output;
 }

packages/clipper/src/types.ts

@@ -48,6 +48,7 @@ export type Options = {
   scale?: number;
   fetchOptions?: FetchOptions;
   inlineOptions?: InlineOptions;
+  styles?: boolean;
 };
 
 export type Config = {

packages/clipper/src/utils.ts

@@ -24,85 +24,6 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 const WOFF = "application/font-woff";
 const JPEG = "image/jpeg";
 
-const SVGElements = [
-  "altGlyph",
-  "altGlyphDef",
-  "altGlyphItem",
-  "animate",
-  "animateColor",
-  "animateMotion",
-  "animateTransform",
-  "circle",
-  "clipPath",
-  "color-profile",
-  "cursor",
-  "defs",
-  "desc",
-  "ellipse",
-  "feBlend",
-  "feColorMatrix",
-  "feComponentTransfer",
-  "feComposite",
-  "feConvolveMatrix",
-  "feDiffuseLighting",
-  "feDisplacementMap",
-  "feDistantLight",
-  "feFlood",
-  "feFuncA",
-  "feFuncB",
-  "feFuncG",
-  "feFuncR",
-  "feGaussianBlur",
-  "feImage",
-  "feMerge",
-  "feMergeNode",
-  "feMorphology",
-  "feOffset",
-  "fePointLight",
-  "feSpecularLighting",
-  "feSpotLight",
-  "feTile",
-  "feTurbulence",
-  "filter",
-  "font-face",
-  "font-face-format",
-  "font-face-name",
-  "font-face-src",
-  "font-face-uri",
-  "foreignObject",
-  "g",
-  "glyph",
-  "glyphRef",
-  "hkern",
-  "image",
-  "line",
-  "linearGradient",
-  "marker",
-  "mask",
-  "metadata",
-  "missing-glyph",
-  "mpath",
-  "path",
-  "pattern",
-  "polygon",
-  "polyline",
-  "radialGradient",
-  "rect",
-  "set",
-  "stop",
-  "svg",
-  "switch",
-  "symbol",
-  "text",
-  "textPath",
-  "title",
-  "tref",
-  "tspan",
-  "use",
-  "view",
-  "vkern"
-].map((a) => a.toLowerCase());
-
 const mimes = {
   woff: WOFF,
   woff2: WOFF,
@@ -244,9 +165,12 @@ function getRootStylesheet() {
   return null;
 }
 
-function isSVGElement(element: HTMLElement) {
-  if (!element || !element.tagName) return false;
-  return SVGElements.includes(element.tagName.toLowerCase());
+function safeQuerySelectorAll(root: Node, selector: string) {
+  try {
+    return (root as HTMLElement).querySelectorAll(selector);
+  } catch (e) {
+    return new NodeList();
+  }
 }
 
 export {
@@ -264,5 +188,5 @@ export {
   escapeXhtml,
   width,
   height,
-  isSVGElement
+  safeQuerySelectorAll
 };

packages/core/__tests__/lookup.test.js

@@ -139,18 +139,3 @@ test("search reminders", () =>
     const descriptionSearch = await db.lookup.reminders("please do").ids();
     expect(descriptionSearch).toHaveLength(1);
   }));
-
-describe("notesWithHighlighting", () => {
-  test("search notes with parentheses in query should load the item", () =>
-    noteTest({
-      title: "(with parantheses)"
-    }).then(async ({ db }) => {
-      await db.notes.add(TEST_NOTE);
-      const filtered = await db.lookup.notesWithHighlighting(
-        "(with parantheses)",
-        db.notes.all
-      );
-      const item = await filtered.item(0);
-      expect(item.item).toBeDefined();
-    }));
-});

packages/core/src/api/lookup.ts

@@ -1154,8 +1154,7 @@ function textContainsTokens(text: string, tokens: QueryTokens) {
   const lowerCasedText = text.toLowerCase();
 
   const createTagPattern = (token: string) => {
-    const escapedToken = token.replace(/[()]/g, "\\$&");
-    return `<${MATCH_TAG_NAME}\\s+id="(.+?)">${escapedToken}<\\/${MATCH_TAG_NAME}>`;
+    return `<${MATCH_TAG_NAME}\\s+id="(.+?)">${token}<\\/${MATCH_TAG_NAME}>`;
   };
 
   if (

packages/core/src/api/user-manager.ts

@@ -666,15 +666,6 @@ class UserManager {
         usesFallback: await this.usesFallbackPWHash(old_password)
       });
 
-    // retrieve user keys before deriving a new encryption key
-    const oldUserKeys = {
-      attachmentsKey: await this.getAttachmentsKey(),
-      monographPasswordsKey: await this.getMonographPasswordsKey(),
-      inboxKeys: (await this.hasInboxKeys())
-        ? await this.getInboxKeys()
-        : undefined
-    } as const;
-
     await this.db.storage().deriveCryptoKey({
       password: new_password,
       salt
@@ -687,33 +678,27 @@ class UserManager {
     const userEncryptionKey = await this.getEncryptionKey();
     if (userEncryptionKey) {
       const updateUserPayload: Partial<User> = {};
-      if (oldUserKeys.attachmentsKey) {
+      const attachmentsKey = await this.getAttachmentsKey();
+      if (attachmentsKey) {
         user.attachmentsKey = await this.db
           .storage()
-          .encrypt(
-            userEncryptionKey,
-            JSON.stringify(oldUserKeys.attachmentsKey)
-          );
+          .encrypt(userEncryptionKey, JSON.stringify(attachmentsKey));
         updateUserPayload.attachmentsKey = user.attachmentsKey;
       }
-      if (oldUserKeys.monographPasswordsKey) {
+      const monographPasswordsKey = await this.getMonographPasswordsKey();
+      if (monographPasswordsKey) {
         user.monographPasswordsKey = await this.db
           .storage()
-          .encrypt(
-            userEncryptionKey,
-            JSON.stringify(oldUserKeys.monographPasswordsKey)
-          );
+          .encrypt(userEncryptionKey, JSON.stringify(monographPasswordsKey));
         updateUserPayload.monographPasswordsKey = user.monographPasswordsKey;
       }
-      if (oldUserKeys.inboxKeys) {
+      const inboxKeys = await this.getInboxKeys();
+      if (inboxKeys) {
         user.inboxKeys = {
-          public: oldUserKeys.inboxKeys.publicKey,
+          public: inboxKeys.publicKey,
           private: await this.db
             .storage()
-            .encrypt(
-              userEncryptionKey,
-              JSON.stringify(oldUserKeys.inboxKeys.privateKey)
-            )
+            .encrypt(userEncryptionKey, JSON.stringify(inboxKeys.privateKey))
         };
         updateUserPayload.inboxKeys = user.inboxKeys;
       }

packages/editor-mobile/public/index.html

@@ -34,11 +34,7 @@
       }
 
       .ProseMirror > :first-child {
-        margin-top: 5px !important;
-      }
-
-      .ProseMirror:first-child {
-        margin-top: 0px !important;
+        margin-top: 0.4em !important;
       }
 
       #root {

packages/editor-mobile/src/components/editor.tsx

@@ -113,8 +113,7 @@ const Tiptap = ({
     claims: {
       callout: !!settings.features?.callout?.isAllowed,
       outlineList: !!settings.features?.outlineList?.isAllowed,
-      taskList: !!settings.features?.taskList?.isAllowed,
-      insertAttachment: settings.loggedIn
+      taskList: !!settings.features?.taskList?.isAllowed
     },
     onPermissionDenied: (claim) => {
       post(
@@ -581,9 +580,7 @@ const Tiptap = ({
                   display: "flex",
                   alignItems: "center",
                   padding: "0px 16px",
-                  paddingBottom: "3px",
-                  boxSizing: "border-box",
-                  minHeight: "28px"
+                  paddingBottom: "6px"
                 }}
               >
                 <StatusBar

packages/editor-mobile/src/components/statusbar.tsx

@@ -77,19 +77,26 @@ function StatusBar({
     fontSize: 12,
     color: "var(--nn_secondary_paragraph)",
     paddingBottom: 0,
-    fontFamily: "Inter",
     userSelect: "none"
   };
 
   return (
-    <p
-      onMouseDown={(e) => {
-        setShowChars(!showChars);
+    <div
+      style={{
+        display: "flex",
+        height: "25px",
+        alignItems: "center"
       }}
-      style={paragraphStyle}
     >
-      {showChars ? strings.charactersCount(chars) : words}
-    </p>
+      <p
+        onMouseDown={(e) => {
+          setShowChars(!showChars);
+        }}
+        style={paragraphStyle}
+      >
+        {showChars ? strings.charactersCount(chars) : words}
+      </p>
+    </div>
   );
 }
 

packages/editor-mobile/src/components/tags.tsx

@@ -55,6 +55,7 @@ function Tags(props: { settings: Settings; loading?: boolean }) {
       style={{
         display: "flex",
         alignItems: "center",
+        minHeight: "25px",
         opacity: props.loading ? 0 : 1,
         gap: 6
       }}

packages/editor-mobile/src/components/title.tsx

@@ -73,10 +73,9 @@ function Title({
 
   useEffect(() => {
     if (!loading) {
-      resizeTextarea();
       setTimeout(() => {
         resizeTextarea();
-      }, 100);
+      }, 300);
     }
   }, [loading, resizeTextarea]);
 
@@ -155,9 +154,6 @@ function Title({
         onPaste={() => {
           resizeTextarea();
         }}
-        onCut={() => {
-          resizeTextarea();
-        }}
         placeholder={titlePlaceholder}
       />
     </>

packages/editor-mobile/src/hooks/useSettings.ts

@@ -34,8 +34,7 @@ const initialState = {
   fontFamily: "sans-serif",
   fontSize: 16,
   timeFormat: "12-hour",
-  dateFormat: "DD-MM-YYYY",
-  loggedIn: false
+  dateFormat: "DD-MM-YYYY"
 };
 
 global.settingsController = {

packages/editor-mobile/src/utils/index.ts

@@ -53,7 +53,6 @@ export type Settings = {
   fontScale: number;
   markdownShortcuts: boolean;
   features: Record<any, any>;
-  loggedIn: boolean;
 };
 
 /* eslint-disable no-var */

packages/editor/src/extensions/attachment/attachment.ts

@@ -23,7 +23,6 @@ import { createNodeView } from "../react/index.js";
 import { AttachmentComponent } from "./component.js";
 import { Attachment } from "./types.js";
 import { tiptapKeys } from "@notesnook/common";
-import { hasPermission } from "../../types.js";
 
 export type AttachmentType = "image" | "file" | "camera";
 export interface AttachmentOptions {
@@ -111,10 +110,6 @@ export const AttachmentNode = Node.create<AttachmentOptions>({
       insertAttachment:
         (attachment) =>
         ({ commands, state }) => {
-          if (!hasPermission("insertAttachment")) {
-            return false;
-          }
-
           const { $from } = state.selection;
           const maybeAttachmentNode = state.doc.nodeAt($from.pos);
           if (maybeAttachmentNode?.type === this.type) {

packages/editor/src/extensions/callout/callout.ts

@@ -258,10 +258,10 @@ export const Callout = Node.create({
       container.onmousedown = onClick;
       container.ontouchstart = onClick;
 
-      if (node.attrs.hidden) {
-        container.dataset.hidden = node.attrs.hidden;
+      if (node.attrs.hiddenUnder) {
+        container.dataset.hiddenUnder = node.attrs.hiddenUnder;
       } else {
-        delete container.dataset.hidden;
+        delete container.dataset.hiddenUnder;
       }
 
       return {
@@ -275,9 +275,9 @@ export const Callout = Node.create({
           if (updatedNode.attrs.collapsed) container.classList.add("collapsed");
           else container.classList.remove("collapsed");
 
-          if (updatedNode.attrs.hidden)
-            container.dataset.hidden = updatedNode.attrs.hidden;
-          else delete container.dataset.hidden;
+          if (updatedNode.attrs.hiddenUnder)
+            container.dataset.hiddenUnder = updatedNode.attrs.hiddenUnder;
+          else delete container.dataset.hiddenUnder;
 
           return true;
         }

packages/editor/src/extensions/check-list-item/__tests__/__snapshots__/check-list-item.test.ts.snap

@@ -1,3 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`check list item > inline image as first child in check list item 1`] = `"<ul class="simple-checklist"><li class="simple-checklist--item"><p data-spacing="double">item 1</p></li><li class="simple-checklist--item"><p data-spacing="double"></p><img src="image.png" data-aspect-ratio="1"></li></ul>"`;

packages/editor/src/extensions/check-list-item/__tests__/check-list-item.test.ts

@@ -1,55 +0,0 @@
-/*
-This file is part of the Notesnook project (https://notesnook.com/)
-
-Copyright (C) 2023 Streetwriters (Private) Limited
-
-This program is free software: you can redistribute it and/or modify
-it under the terms of the GNU General Public License as published by
-the Free Software Foundation, either version 3 of the License, or
-(at your option) any later version.
-
-This program is distributed in the hope that it will be useful,
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-GNU General Public License for more details.
-
-You should have received a copy of the GNU General Public License
-along with this program.  If not, see <http://www.gnu.org/licenses/>.
-*/
-
-import { describe, expect, test } from "vitest";
-import {
-  createEditor,
-  h,
-  p,
-  checkList,
-  checkListItem
-} from "../../../../test-utils/index.js";
-import { CheckList } from "../../check-list/check-list.js";
-import { CheckListItem } from "../check-list-item.js";
-import { Paragraph } from "../../paragraph/paragraph.js";
-import { ImageNode } from "../../image/image.js";
-
-describe("check list item", () => {
-  /**
-   * see https://github.com/streetwriters/notesnook/pull/8877 for more context
-   */
-  test("inline image as first child in check list item", async () => {
-    const el = checkList(
-      checkListItem([p(["item 1"])]),
-      checkListItem([h("img", [], { src: "image.png" })])
-    );
-
-    const { editor } = createEditor({
-      initialContent: el.outerHTML,
-      extensions: {
-        checkList: CheckList,
-        checkListItem: CheckListItem.configure({ nested: true }),
-        paragraph: Paragraph,
-        image: ImageNode
-      }
-    });
-
-    expect(editor.getHTML()).toMatchSnapshot();
-  });
-});

packages/editor/src/extensions/check-list-item/check-list-item.ts

@@ -25,7 +25,6 @@ import {
 } from "@tiptap/core";
 import { Node as ProseMirrorNode } from "@tiptap/pm/model";
 import { CheckList } from "../check-list/check-list.js";
-import { ensureLeadingParagraph } from "../../utils/prosemirror.js";
 
 export interface CheckListItemOptions {
   onReadOnlyChecked?: (node: ProseMirrorNode, checked: boolean) => boolean;
@@ -68,8 +67,7 @@ export const CheckListItem = Node.create<CheckListItemOptions>({
     return [
       {
         tag: `li.simple-checklist--item`,
-        priority: 51,
-        getContent: ensureLeadingParagraph
+        priority: 51
       }
     ];
   },

packages/editor/src/extensions/code-block/code-block.ts

@@ -555,7 +555,7 @@ export const CodeBlock = Node.create<CodeBlockOptions>({
           compareCaretPosition(prev.caretPosition, next.caretPosition) ||
           prev.language !== next.language ||
           prev.indentType !== next.indentType ||
-          prev.hidden !== next.hidden
+          prev.hiddenUnder !== next.hiddenUnder
         );
       }
     });

packages/editor/src/extensions/heading/heading.ts

@@ -24,7 +24,7 @@ import {
 } from "@tiptap/core";
 import { Heading as TiptapHeading } from "@tiptap/extension-heading";
 import { isClickWithinBounds } from "../../utils/prosemirror.js";
-import { Plugin, PluginKey, Selection, Transaction } from "@tiptap/pm/state";
+import { Selection, Transaction } from "@tiptap/pm/state";
 import { Node } from "@tiptap/pm/model";
 import { useToolbarStore } from "../../toolbar/stores/toolbar-store.js";
 
@@ -72,14 +72,13 @@ export const Heading = TiptapHeading.extend({
             return false;
           }
 
-          const { textAlign, textDirection, collapsed } =
+          const { textAlign, textDirection } =
             state.selection.$from.parent.attrs;
 
           return commands.setNode(this.name, {
             ...attributes,
             textAlign,
-            textDirection,
-            collapsed
+            textDirection
           });
         }
     };
@@ -90,14 +89,14 @@ export const Heading = TiptapHeading.extend({
       {
         types: COLLAPSIBLE_BLOCK_TYPES,
         attributes: {
-          hidden: {
-            default: false,
+          hiddenUnder: {
+            default: null,
             keepOnSplit: false,
-            parseHTML: (element) => element.dataset.hidden === "true",
+            parseHTML: (element) => element.dataset.hiddenUnder || null,
             renderHTML: (attributes) => {
-              if (!attributes.hidden) return {};
+              if (!attributes.hiddenUnder) return {};
               return {
-                "data-hidden": attributes.hidden === true
+                "data-hidden-under": attributes.hiddenUnder
               };
             }
           }
@@ -152,19 +151,15 @@ export const Heading = TiptapHeading.extend({
         find: HEADING_REGEX,
         type: this.type,
         getAttributes: (match) => {
-          const { textAlign, textDirection, collapsed } =
+          const { textAlign, textDirection } =
             this.editor.state.selection.$from.parent?.attrs || {};
           const level = match[1].length;
-          return { level, textAlign, textDirection, collapsed };
+          return { level, textAlign, textDirection };
         }
       })
     ];
   },
 
-  addProseMirrorPlugins() {
-    return [headingUpdatePlugin];
-  },
-
   addNodeView() {
     return ({ node, getPos, editor, HTMLAttributes }) => {
       const heading = document.createElement(`h${node.attrs.level}`);
@@ -184,14 +179,11 @@ export const Heading = TiptapHeading.extend({
         if (typeof pos !== "number") return;
 
         const resolvedPos = editor.state.doc.resolve(pos);
-        const forbiddenParents = ["callout", "table"];
-        if (
-          findParentNodeClosestToPos(resolvedPos, (node) =>
-            forbiddenParents.includes(node.type.name)
-          )
-        ) {
-          return;
-        }
+        const calloutAncestor = findParentNodeClosestToPos(
+          resolvedPos,
+          (node) => node.type.name === "callout"
+        );
+        if (calloutAncestor) return;
 
         if (
           isClickWithinBounds(
@@ -208,9 +200,16 @@ export const Heading = TiptapHeading.extend({
             if (currentNode && currentNode.type.name === "heading") {
               const shouldCollapse = !currentNode.attrs.collapsed;
               const headingLevel = currentNode.attrs.level;
+              const headingId = currentNode.attrs.blockId;
 
               tr.setNodeAttribute(pos, "collapsed", shouldCollapse);
-              toggleNodesUnderHeading(tr, pos, headingLevel, shouldCollapse);
+              toggleNodesUnderHeading(
+                tr,
+                pos,
+                headingLevel,
+                shouldCollapse,
+                headingId
+              );
             }
             return true;
           });
@@ -235,9 +234,9 @@ export const Heading = TiptapHeading.extend({
           if (updatedNode.attrs.collapsed) heading.dataset.collapsed = "true";
           else delete heading.dataset.collapsed;
 
-          if (updatedNode.attrs.hidden)
-            heading.dataset.hidden = updatedNode.attrs.hidden;
-          else delete heading.dataset.hidden;
+          if (updatedNode.attrs.hiddenUnder)
+            heading.dataset.hiddenUnder = updatedNode.attrs.hiddenUnder;
+          else delete heading.dataset.hiddenUnder;
 
           if (updatedNode.attrs.textAlign)
             heading.style.textAlign =
@@ -260,7 +259,8 @@ function toggleNodesUnderHeading(
   tr: Transaction,
   headingPos: number,
   headingLevel: number,
-  isCollapsing: boolean
+  isCollapsing: boolean,
+  headingId: string
 ) {
   const { doc } = tr;
   const headingNode = doc.nodeAt(headingPos);
@@ -269,8 +269,6 @@ function toggleNodesUnderHeading(
   let nextPos = headingPos + headingNode.nodeSize;
   const cursorPos = tr.selection.from;
   let shouldMoveCursor = false;
-  let insideCollapsedHeading = false;
-  let nestedHeadingLevel: number | null = null;
 
   while (nextPos < doc.content.size) {
     const nextNode = doc.nodeAt(nextPos);
@@ -291,33 +289,15 @@ function toggleNodesUnderHeading(
       shouldMoveCursor = true;
     }
 
-    const currentPos = nextPos;
-    nextPos += nextNode.nodeSize;
-
     if (COLLAPSIBLE_BLOCK_TYPES.includes(nextNode.type.name)) {
-      if (isCollapsing) {
-        tr.setNodeAttribute(currentPos, "hidden", true);
-      } else {
-        if (insideCollapsedHeading) {
-          if (
-            nextNode.type.name === "heading" &&
-            nestedHeadingLevel !== null &&
-            nextNode.attrs.level <= nestedHeadingLevel
-          ) {
-            insideCollapsedHeading = false;
-            nestedHeadingLevel = null;
-          } else {
-            continue;
-          }
-        }
-
-        tr.setNodeAttribute(currentPos, "hidden", false);
-        if (nextNode.type.name === "heading" && nextNode.attrs.collapsed) {
-          insideCollapsedHeading = true;
-          nestedHeadingLevel = nextNode.attrs.level;
-        }
+      if (isCollapsing && typeof nextNode.attrs.hiddenUnder !== "string") {
+        tr.setNodeAttribute(nextPos, "hiddenUnder", headingId);
+      } else if (!isCollapsing && nextNode.attrs.hiddenUnder === headingId) {
+        tr.setNodeAttribute(nextPos, "hiddenUnder", null);
       }
     }
+
+    nextPos += nextNode.nodeSize;
   }
 
   if (shouldMoveCursor) {
@@ -352,45 +332,3 @@ function findEndOfCollapsedSection(
 
   return nextPos;
 }
-
-const headingUpdatePlugin = new Plugin({
-  key: new PluginKey("headingUpdate"),
-  appendTransaction(transactions, oldState, newState) {
-    const hasDocChanges = transactions.some(
-      (transaction) => transaction.docChanged
-    );
-    if (!hasDocChanges) return null;
-
-    const tr = newState.tr;
-    const oldDoc = oldState.doc;
-    const newDoc = newState.doc;
-    let modified = false;
-
-    newDoc.descendants((newNode, pos) => {
-      if (newNode.type.name === "heading") {
-        if (pos >= oldDoc.content.size) return;
-
-        const oldNode = oldDoc.nodeAt(pos);
-        if (
-          oldNode &&
-          oldNode.type.name === "heading" &&
-          oldNode.attrs.level !== newNode.attrs.level
-        ) {
-          /**
-           * if the level of a collapsed heading is changed,
-           * we need to reset visibility of all the nodes under it as there
-           * might be a heading of same or higher level previously
-           * hidden under this heading
-           */
-          if (newNode.attrs.collapsed) {
-            toggleNodesUnderHeading(tr, pos, oldNode.attrs.level, false);
-            toggleNodesUnderHeading(tr, pos, newNode.attrs.level, true);
-            modified = true;
-          }
-        }
-      }
-    });
-
-    return modified ? tr : null;
-  }
-});

packages/editor/src/extensions/image/component.tsx

@@ -26,7 +26,10 @@ import { DesktopOnly } from "../../components/responsive/index.js";
 import { Icon } from "@notesnook/ui";
 import { Icons } from "../../toolbar/icons.js";
 import { ToolbarGroup } from "../../toolbar/components/toolbar-group.js";
-import { useToolbarStore } from "../../toolbar/stores/toolbar-store.js";
+import {
+  useIsMobile,
+  useToolbarStore
+} from "../../toolbar/stores/toolbar-store.js";
 import { Resizer } from "../../components/resizer/index.js";
 import {
   corsify,
@@ -54,6 +57,7 @@ export function ImageComponent(
   } | null>(null);
   const controllerRef = useRef(new AbortController());
 
+  const isMobile = useIsMobile();
   const { inView, ref: imageRef } = useObserver<HTMLImageElement>({
     threshold: 0.2,
     once: true
@@ -118,7 +122,7 @@ export function ImageComponent(
           enabled={editor.isEditable}
           selected={selected}
           width={size.width}
-          height={bloburl || src ? undefined : size.height}
+          height={size.height}
           onResize={(width, height) => {
             setResizing({ width, height });
           }}

packages/editor/src/extensions/image/image.ts

@@ -28,7 +28,7 @@ import { createNodeView } from "../react/index.js";
 import { TextDirections } from "../text-direction/index.js";
 import { ImageComponent } from "./component.js";
 import { tiptapKeys } from "@notesnook/common";
-import { hasPermission } from "../../types.js";
+import { DOMParser } from "@tiptap/pm/model";
 
 export interface ImageOptions {
   inline: boolean;
@@ -159,10 +159,6 @@ export const ImageNode = Node.create<ImageOptions>({
       insertImage:
         (options) =>
         ({ commands, state }) => {
-          if (!hasPermission("insertAttachment")) {
-            return false;
-          }
-
           const { $from } = state.selection;
           const maybeImageNode = state.doc.nodeAt($from.pos);
           if (maybeImageNode?.type === this.type) {

packages/editor/src/extensions/list-item/list-item.ts

@@ -18,18 +18,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
 import { ListItem as TiptapListItem } from "@tiptap/extension-list-item";
-import { ensureLeadingParagraph } from "../../utils/prosemirror.js";
 
 export const ListItem = TiptapListItem.extend({
-  parseHTML() {
-    return [
-      {
-        priority: 50,
-        tag: `li`,
-        getContent: ensureLeadingParagraph
-      }
-    ];
-  },
   addKeyboardShortcuts() {
     return {
       ...this.parent?.(),

packages/editor/src/extensions/list-item/tests/__snapshots__/list-item.test.ts.snap

@@ -5,5 +5,3 @@ exports[`hitting backspace at the start of first list item 1`] = `"<div><div con
 exports[`hitting backspace at the start of the second (or next) list item 1`] = `"<div><div contenteditable="true" translate="no" class="tiptap ProseMirror" tabindex="0"><ul><li><p>item1item2</p></li></ul></div></div>"`;
 
 exports[`hitting backspace at the start of the second (or next) paragraph inside the list item 1`] = `"<div><div contenteditable="true" translate="no" class="tiptap ProseMirror" tabindex="0"><ul><li><p>item 1item 2</p></li></ul></div></div>"`;
-
-exports[`inline image as first child in list item 1`] = `"<ul><li><p data-spacing="double">item 1</p></li><li><p data-spacing="double"></p><img src="image.png" data-aspect-ratio="1"></li></ul>"`;

packages/editor/src/extensions/list-item/tests/list-item.test.ts

@@ -23,8 +23,6 @@ import { createEditor, h, li, p, ul } from "../../../../test-utils/index.js";
 import BulletList from "../../bullet-list/index.js";
 import OrderedList from "../../ordered-list/index.js";
 import { ListItem } from "../index.js";
-import { Paragraph } from "../../paragraph/paragraph.js";
-import { ImageNode } from "../../image/image.js";
 
 test("hitting backspace at the start of first list item", async () => {
   const el = ul([li([p(["item1"])]), li([p(["item2"])])]);
@@ -99,24 +97,3 @@ test("hitting backspace at the start of the second (or next) paragraph inside th
   await new Promise((resolve) => setTimeout(resolve, 100));
   expect(editorElement.outerHTML).toMatchSnapshot();
 });
-
-/**
- * see https://github.com/streetwriters/notesnook/pull/8877 for more context
- */
-test("inline image as first child in list item", async () => {
-  const el = ul([
-    li([p(["item 1"])]),
-    li([h("img", [], { src: "image.png" })])
-  ]);
-
-  const { editor } = createEditor({
-    initialContent: el.outerHTML,
-    extensions: {
-      listItem: ListItem,
-      paragraph: Paragraph,
-      image: ImageNode
-    }
-  });
-
-  expect(editor.getHTML()).toMatchSnapshot();
-});

packages/editor/src/extensions/math/plugin/math-node-view.ts

@@ -125,10 +125,10 @@ export class MathView implements NodeView, ICursorPosObserver {
     if (options.className) this.dom.classList.add(options.className);
     this.dom.classList.add("math-node");
 
-    if (node.attrs.hidden) {
-      this.dom.dataset.hidden = node.attrs.hidden;
+    if (node.attrs.hiddenUnder) {
+      this.dom.dataset.hiddenUnder = node.attrs.hiddenUnder;
     } else {
-      delete this.dom.dataset.hidden;
+      delete this.dom.dataset.hiddenUnder;
     }
 
     this._mathRenderElt = document.createElement("span");

packages/editor/src/extensions/outline-list-item/__tests__/__snapshots__/outline-list-item.test.ts.snap

@@ -128,5 +128,3 @@ exports[`outline list item > code block in outline list item 1`] = `
   "type": "doc",
 }
 `;
-
-exports[`outline list item > inline image as first child in the old outline list item 1`] = `"<ul data-type="outlineList"><li data-type="outlineListItem"><p data-spacing="double">item 1</p></li><li data-type="outlineListItem"><p data-spacing="double"></p><img src="image.png" data-aspect-ratio="1"></li></ul>"`;

packages/editor/src/extensions/outline-list-item/__tests__/outline-list-item.test.ts

@@ -28,8 +28,6 @@ import { test, expect, describe, beforeAll, vi } from "vitest";
 import { OutlineList } from "../../outline-list/outline-list.js";
 import { OutlineListItem } from "../outline-list-item.js";
 import { CodeBlock } from "../../code-block/code-block.js";
-import { Paragraph } from "../../paragraph/paragraph.js";
-import { ImageNode } from "../../image/image.js";
 
 describe("outline list item", () => {
   beforeAll(() => {
@@ -72,30 +70,4 @@ describe("outline list item", () => {
 
     expect(editor.getJSON()).toMatchSnapshot();
   });
-
-  /**
-   * Two changes happened:
-   * 1. Images were converted from inline nodes to block nodes (https://github.com/streetwriters/notesnook/pull/8563)
-   * 2. Outline list item's `content` schema was changed from `paragraph + list?`  to `block+` to `paragraph block*` (https://github.com/streetwriters/notesnook/pull/8772 and https://github.com/streetwriters/notesnook/commit/0b943d8ecdf04fd7d996fd0a4b1d62ec9569f071)
-   *
-   * In the old editor, it was possible to have an inline image as the first item in the outline list item, but based on the new schema it is not possible anymore. So the editor should insert an empty paragraph before the image.
-   */
-  test("inline image as first child in the old outline list item", async () => {
-    const el = outlineList(
-      outlineListItem(["item 1"]),
-      outlineListItem([h("img", [], { src: "image.png" })])
-    );
-
-    const { editor } = createEditor({
-      initialContent: el.outerHTML,
-      extensions: {
-        outlineList: OutlineList,
-        outlineListItem: OutlineListItem,
-        paragraph: Paragraph,
-        image: ImageNode
-      }
-    });
-
-    expect(editor.getHTML()).toMatchSnapshot();
-  });
 });

packages/editor/src/extensions/outline-list-item/outline-list-item.ts

@@ -24,8 +24,7 @@ import {
 } from "@tiptap/core";
 import {
   findParentNodeOfTypeClosestToPos,
-  isClickWithinBounds,
-  ensureLeadingParagraph
+  isClickWithinBounds
 } from "../../utils/prosemirror.js";
 import { OutlineList } from "../outline-list/outline-list.js";
 import { keybindings, tiptapKeys } from "@notesnook/common";
@@ -65,8 +64,7 @@ export const OutlineListItem = Node.create<ListItemOptions>({
     return [
       {
         priority: 100,
-        tag: `li[data-type="${this.name}"]`,
-        getContent: ensureLeadingParagraph
+        tag: `li[data-type="${this.name}"]`
       }
     ];
   },
@@ -156,7 +154,6 @@ export const OutlineListItem = Node.create<ListItemOptions>({
         const resolvedPos = editor.state.doc.resolve(pos);
         if (isClickWithinBounds(e, resolvedPos, "left")) {
           e.preventDefault();
-          e.stopImmediatePropagation();
           editor.commands.command(({ tr }) => {
             tr.setNodeAttribute(
               pos,

packages/editor/src/extensions/react/react-node-view.tsx

@@ -112,10 +112,10 @@ export class ReactNodeView<P extends ReactNodeViewProps> implements NodeView {
       return;
     }
 
-    if (this.node.attrs.hidden) {
-      this.domRef.dataset.hidden = this.node.attrs.hidden;
+    if (this.node.attrs.hiddenUnder) {
+      this.domRef.dataset.hiddenUnder = this.node.attrs.hiddenUnder;
     } else {
-      delete this.domRef.dataset.hidden;
+      delete this.domRef.dataset.hiddenUnder;
     }
 
     portalProviderAPI.render(this.Component, this.domRef);