fix: remove table overflow prevention (#11)

README.md

@@ -3,8 +3,6 @@
 The Reading View Enhancer is an Obsidian plugin designed to improve the reading experience in Obsidian's reading view mode.
 It provides several features aimed at making the reading view more convenient and comfortable.
 
-<br/>
-
 ## Features
 
 ### Overview
@@ -14,38 +12,32 @@ It provides several features aimed at making the reading view more convenient an
   - Select the previous block
 - **Toggle collapse with keyboard**
   - Toggle collapse
-    - 📌 Collapsible callouts can also be handled
+	- 📌 Collapsible callouts can also be handled
+- **Auto-select top block on switching into reading view** 
 - **Always-visible collapse indicators**
   - Keep all collapse indicators visible
-- **Table overflow prevention**
-  - Make tables scrollable to prevent overflowing
+- **Right side collapse indicator** (experimental)
 - **Scrollable code blocks**
   - Make code blocks scrollable instead of line-wrapping
 
-<br/>
-
 ### Keyboard Block Navigation
 
 > ⚡️ Settings > Reading View Enhancer > Enable Block Selector
 
-https://user-images.githubusercontent.com/78684419/228733812-26bfa11a-f246-4153-83ea-eed9aae39753.mov
-
 Inspired by Notion's block navigation, this feature allows you to select blocks
-in the reading view by clicking on them. Selected blocks will be highlighted,
-and you can navigate between blocks using the arrow keys.
-
-💡 Additionally, there is a `Select top block in the view` command,
-which allows you to assign a hotkey for keyboard control.
+in the reading view by pressing keyboard. Selected blocks will be highlighted.
 
-If a selected block is too long, the plugin will automatically scroll to display
-the block's top or bottom, loading adjacent blocks that are not yet in the DOM tree.
+- Default key binding
+	- `ArrowDown | j`: Select the next block
+	- `ArrowUp | k`: Select the previous block
 
-- `ArrowDown | j`: Select the next block
-- `ArrowUp | k`: Select the previous block
-- `ArrowLeft | h | ArrowRight | l`: Toggle collapse
+> [!IMPORTANT]
+> If a selected block is too long, the plugin will automatically scroll to display
+> the block's top or bottom, loading adjacent blocks that are not yet in the DOM tree.
 
-❗️ To disable this feature only on mobile,
-enable the 'Disable Block Selector on Mobile' option in settings.
+> [!NOTE]
+> Additionally, there is a `Select top block in the view` command,
+> which allows you to assign a hotkey for keyboard control.
 
 #### What is a "Block"?
 
@@ -59,61 +51,50 @@ and callouts are examples of blocks.
 
 > ⚡️ Settings > Reading View Enhancer > Block color
 
-You can set a custom color for the block highlight effect.
-
-<br/>
-
-### Always-visible Collapse Indicators
-
-> ⚡️ Settings > Reading View Enhancer > Always on collapse indicator
+You can set a custom color and transparency for the block highlight effect.
 
-By default, collapse indicators are invisible until hovered over.
+### Toggle collapse with keyboard
 
-<img width="400" alt="no-indicator" src="https://user-images.githubusercontent.com/78684419/228733972-6b364496-071b-469a-a401-656b3df27311.png">
+When a block is selected and collapsible, you can use your keyboard to toggle collapse. 
 
-This option,
+- Default key binding
+	- `ArrowLeft | h | ArrowRight | l`: Toggle collapse
 
-<img width="400" alt="turn-on-indicator" src="https://user-images.githubusercontent.com/78684419/228734050-54d19f73-35cd-4eba-ae33-8d91f7bed180.png">
+### Auto-select top block on switching into reading view
 
-keeps indicators always visible.
+> ⚡️ Settings > Reading View Enhancer > Auto-select top block
 
-<img width="400" alt="has-indicator" src="https://user-images.githubusercontent.com/78684419/228734081-99e58a5d-b6b2-4418-92f1-b47db403e7ae.png">
+When you switch to reading view, the top block will be automatically selected.
 
-<br/>
+### Always-visible Collapse Indicators
 
-### Table Overflow Prevention
+> ⚡️ Settings > Reading View Enhancer > Always on collapse indicator
 
-> ⚡️ Settings > Reading View Enhancer > Prevent table overflow
+By default, collapse indicators are invisible until hovered over.  
+This option keeps indicators always visible.
 
-https://user-images.githubusercontent.com/78684419/228734185-aca9e6ee-711e-4929-8e10-a269a43b97f8.mov
+### Right side collapse indicator (experimental)
 
-Enable horizontally scrollable tables to prevent table overflow.
+> ⚡️ Settings > Reading View Enhancer > [Experimental] Collapse indicator on the right side
 
-In Obsidian v1.1.16, tables having a word longer than the viewport's width
-will create a horizontal scrollbar across the entire view,
-which can be inconvenient on mobile devices.
+Set collapse indicators to be shown on the right side.
 
-<br/>
+> [!WARNING]
+> Since this makes some elements relative that were previously not, may lead some problems.
 
 ### Scrollable Code Blocks
 
 > ⚡️ Settings > Reading View Enhancer > Scrollable code
 
-This feature makes code blocks scrollable, rather than using line-wrapping.
-
-By default, codes get line-wrapped when it's too long.
-
-<img width="400" alt="before-code-scroll" src="https://user-images.githubusercontent.com/78684419/228734385-2cf4650a-0559-48c8-a1ad-3229f68b40a1.png">
-
-With this option,
-
-<img width="400" alt="turn-on-code-scroll" src="https://user-images.githubusercontent.com/78684419/228734481-5ed5994c-ca63-4777-9341-8da105afcc94.png">
-
-You can make code blocks scrollable instead of line break.
+This feature makes code blocks scrollable in reading view,
+rather than using line-wrapping.
 
-<img width="400" alt="code-scroll" src="https://user-images.githubusercontent.com/78684419/228734516-77f5446f-2669-43d5-8428-65e400e7a00d.png">
+By default, codes get line-wrapped when it's too long.  
+With this option, you can make code blocks scrollable instead of line break.
 
-<br/>
+> [!IMPORTANT]
+> This feature is for reading view. For the editor,
+> install "Style Settings" plugin and set the code block to scrollable.
 
 ## How to install manually?
 

manifest.json

@@ -1,7 +1,7 @@
 {
 	"id": "reading-view-enhancer",
 	"name": "Reading View Enhancer",
-	"version": "0.1.5",
+	"version": "0.1.6",
 	"minAppVersion": "1.0.0",
 	"description": "Enhances reading view. Use arrow keys to navigate between blocks or toggle collapse.",
 	"author": "Galacsh",

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "reading-view-enhancer",
-	"version": "0.1.5",
+	"version": "0.1.6",
 	"description": "This is a Obsidian plugin that enhances reading view. Use arrow keys to navigate between blocks or toggle collapse.",
 	"main": "main.js",
 	"scripts": {

src/main.ts

@@ -71,13 +71,11 @@ export default class ReadingViewEnhancer extends Plugin {
 	 *
 	 * - Apply block color
 	 * - Apply always on collapse indicator
-	 * - Apply prevent table overflowing
 	 * - Apply scrollable code
 	 */
 	private applySettingsToStyles() {
 		this.applyBlockColor();
 		this.applyAlwaysOnCollapse();
-		this.applyPreventTableOverflowing();
 		this.applyScrollableCode();
 		this.applyCollapseIndicatorOnTheRightSide();
 		this.styles.apply();
@@ -116,17 +114,6 @@ export default class ReadingViewEnhancer extends Plugin {
 		if (isImmediate) this.styles.apply();
 	}
 
-	/**
-	 * Apply prevent table overflowing
-	 *
-	 * @param isImmediate Whether to apply styles immediately
-	 */
-	applyPreventTableOverflowing(isImmediate = false) {
-		this.styles.of("prevent-table-overflowing").isActive =
-			this.settings.preventTableOverflowing;
-		if (isImmediate) this.styles.apply();
-	}
-
 	/**
 	 * Apply scrollable code
 	 *

src/settings/index.ts

@@ -12,7 +12,6 @@ export interface RveSettings {
 	enableBlockSelector: boolean;
 	disableBlockSelectorOnMobile: boolean;
 	alwaysOnCollapseIndicator: boolean;
-	preventTableOverflowing: boolean;
 	scrollableCode: boolean;
 	autoSelectTopBlock: boolean;
 	collapseIndicatorOnTheRightSide: boolean;
@@ -30,7 +29,6 @@ export const DEFAULT_SETTINGS: RveSettings = {
 	enableBlockSelector: true,
 	disableBlockSelectorOnMobile: false,
 	alwaysOnCollapseIndicator: false,
-	preventTableOverflowing: false,
 	scrollableCode: false,
 	autoSelectTopBlock: false,
 	collapseIndicatorOnTheRightSide: false,

src/settings/miscellaneous/index.ts

@@ -2,7 +2,6 @@ import ReadingViewEnhancer from "src/main";
 import AlwaysOnCollapseIndicatorSetting from "./always-on-collapse-indicator";
 import AutoSelectTopBlockSetting from "./auto-select-top-block";
 import CollapseIndicatorsOnTheRightSideSetting from "./collapse-indicators-on-the-right-side";
-import PreventTableOverflowingSetting from "./prevent-table-overflow";
 import ScrollableCodeSetting from "./scrollable-code";
 
 /**
@@ -12,7 +11,6 @@ export default class MiscellaneousSettings {
 	constructor(containerEl: HTMLElement, plugin: ReadingViewEnhancer) {
 		containerEl.createEl("h1", { text: "Miscellaneous" });
 		new AlwaysOnCollapseIndicatorSetting(containerEl, plugin);
-		new PreventTableOverflowingSetting(containerEl, plugin);
 		new ScrollableCodeSetting(containerEl, plugin);
 		new AutoSelectTopBlockSetting(containerEl, plugin);
 		new CollapseIndicatorsOnTheRightSideSetting(containerEl, plugin);

src/styles.ts

@@ -114,27 +114,6 @@ export class CollapseIndicatorOnTheRightSideRule extends StyleRule {
 	}
 }
 
-/**
- * Prevent table overflowing rule.
- *
- * No variables to inject.
- */
-export class PreventTableOverflowingRule extends StyleRule {
-	constructor() {
-		const template = `
-			.markdown-preview-section > div:has(table) {
-				overflow: auto;
-			}
-
-			.markdown-preview-section thead > tr > th,
-			.markdown-preview-section tbody > tr > td {
-				white-space: nowrap;
-			}
-		`;
-		super(template, (template: string) => template);
-	}
-}
-
 /**
  * Scrollable code rule.
  *
@@ -162,7 +141,6 @@ type RuleKey =
 	| "block-color"
 	| "collapse-indicator-always-on"
 	| "collapse-indicator-on-the-right-side"
-	| "prevent-table-overflowing"
 	| "scrollable-code";
 
 /**
@@ -182,7 +160,6 @@ export default class RveStyles {
 			"collapse-indicator-always-on": new CollapseIndicatorAlwaysOnRule(),
 			"collapse-indicator-on-the-right-side":
 				new CollapseIndicatorOnTheRightSideRule(),
-			"prevent-table-overflowing": new PreventTableOverflowingRule(),
 			"scrollable-code": new ScrollableCodeRule(),
 		};
 	}

versions.json

@@ -4,5 +4,6 @@
 	"0.1.2": "1.0.0",
 	"0.1.3": "1.0.0",
 	"0.1.4": "1.0.0",
-	"0.1.5": "1.0.0"
+	"0.1.5": "1.0.0",
+	"0.1.6": "1.0.0"
 }