@fsegurai/marked-extended-tabs 15.0.0

package/README.md

@@ -0,0 +1,125 @@
+<p align="center">
+  <img alt="Marked Extensions Logo" src="https://raw.githubusercontent.com/fsegurai/marked-extensions/main/demo/public/marked-extensions.svg">
+</p>
+
+<p align="center">
+  <a href="https://github.com/fsegurai/marked-extensions/actions/workflows/release-library.yml">
+      <img src="https://github.com/fsegurai/marked-extensions/actions/workflows/release-library.yml/badge.svg"
+          alt="Build Status">
+  </a>
+  <a href="https://www.npmjs.org/package/@fsegurai/marked-extended-tabs">
+      <img src="https://img.shields.io/npm/v/@fsegurai/marked-extended-tabs.svg"
+          alt="Latest Release">
+  </a>
+  <br>
+  <img alt="GitHub contributors" src="https://img.shields.io/github/contributors/fsegurai/marked-extensions">
+  <img alt="Dependency status for repo" src="https://img.shields.io/librariesio/github/fsegurai/marked-extensions">
+  <a href="https://opensource.org/licenses/MIT">
+    <img alt="GitHub License" src="https://img.shields.io/github/license/fsegurai/marked-extensions">
+  </a>
+  <br>
+  <img alt="Stars" src="https://img.shields.io/github/stars/fsegurai/marked-extensions?style=square&labelColor=343b41"/> 
+  <img alt="Forks" src="https://img.shields.io/github/forks/fsegurai/marked-extensions?style=square&labelColor=343b41"/>
+</p>
+
+**A library of extended typographic features for Marked.js.**
+
+`@fsegurai/marked-extended-tabs` is an extensions for Marked.js that adds support for extended typographic characters to easily translate plain ASCII punctuation characters into "smart" typographic punctuation HTML entities.
+
+### Table of contents
+
+- [Installation](#installation)
+- [Usage](#usage)
+    - [Basic Usage](#basic-usage)
+    - [Configuration Options](#configuration-options)
+- [More Resources](#more-resources)
+    - [Available Extensions](#available-extensions)
+    - [Demo Application](#demo-application)
+- [License](#license)
+
+## Installation
+
+To add `@fsegurai/marked-extended-tabs` along with Marked.js to your `package.json` use the following commands.
+
+```bash
+bun install @fsegurai/marked-extended-tabs marked@^15.0.0 --save
+```
+
+## Usage
+
+### Basic Usage
+
+Import `@fsegurai/marked-extended-tabs` and apply it to your Marked instance as shown below.
+
+```javascript
+import { marked } from "marked";
+import markedExtendedTabs from "@fsegurai/marked-extended-tabs";
+
+// or UMD script
+// <script src="https://cdn.jsdelivr.net/npm/marked/lib/marked.umd.js"></script>
+// <script src="https://cdn.jsdelivr.net/npm/@fsegurai/marked-extended-tabs/lib/index.umd.js"></script>
+
+marked.use(markedExtendedTabs());
+
+const exampleMarkdown = `
+:::tabs
+::tab{label="JavaScript"}
+\`\`\`
+console.log("Hello from JS");
+\`\`\`
+::
+
+::tab{label="Python"}
+\`\`\`python
+print("Hello from Python")
+\`\`\`
+::
+:::
+`;
+
+marked.parse(exampleMarkdown);
+```
+
+### Configuration Options
+
+You can customize the tabs behavior with several options:
+
+```javascript
+// Default behavior (recommended)
+marked.use(markedExtendedTabs());
+
+// With specific configuration
+marked.use(
+    markedExtendedTabs({}),
+);
+```
+
+### Available Extensions
+
+- [Marked Extended Accordion](https://www.npmjs.com/package/@fsegurai/marked-extended-accordion)
+- [Marked Extended Alert](https://www.npmjs.com/package/@fsegurai/marked-extended-alert)
+- [Marked Extended Footnote](https://www.npmjs.com/package/@fsegurai/marked-extended-footnote)
+- [Marked Extended Lists](https://www.npmjs.com/package/@fsegurai/marked-extended-lists)
+- [Marked Extended Spoiler](https://www.npmjs.com/package/@fsegurai/marked-extended-spoiler)
+- [Marked Extended Tables](https://www.npmjs.com/package/@fsegurai/marked-extended-tables)
+- [Marked Extended Tabs](https://www.npmjs.com/package/@fsegurai/marked-extended-tabs)
+- [Marked Extended Timeline](https://www.npmjs.com/package/@fsegurai/marked-extended-timeline)
+- [Marked Extended Typographic](https://www.npmjs.com/package/@fsegurai/marked-extended-typographic)
+
+### Demo Application
+
+To see all extensions in action, check out the [[DEMO]](https://fsegurai.github.io/marked-extensions).
+
+To set up the demo locally, follow the next steps:
+
+```bash
+git clone https://github.com/fsegurai/marked-extensions.git
+bun install
+bun start
+```
+
+This will serve the application locally at [http://[::1]:8000](http://[::1]:8000).
+
+## License
+
+Licensed under [MIT](https://opensource.org/licenses/MIT).

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@fsegurai/marked-extended-tabs",
+  "version": "15.0.0",
+  "description": "Extended Tabs for Marked.js",
+  "main": "./dist/index.cjs",
+  "module": "./src/index.js",
+  "browser": "./dist/index.umd.js",
+  "type": "module",
+  "types": "./src/index.d.ts",
+  "files": [
+    "lib/",
+    "src/"
+  ],
+  "exports": {
+    ".": {
+      "import": "./src/index.js",
+      "require": "./lib/index.cjs"
+    }
+  },
+  "keywords": [
+    "parser",
+    "markedjs",
+    "extension",
+    "marked",
+    "marked-extended-accordion",
+    "marked-extended-alert",
+    "marked-extended-footnote",
+    "marked-extended-lists",
+    "marked-extended-spoiler",
+    "marked-extended-tables",
+    "marked-extended-tabs",
+    "marked-extended-timeline",
+    "marked-extended-typographic"
+  ],
+  "author": {
+    "name": "Fabián Segura",
+    "url": "https://www.fsegurai.com/"
+  },
+  "license": "MIT",
+  "scripts": {
+    "prepare": "rollup -c rollup.config.js",
+    "test:types": "tsd -f spec/index.test-d.ts -t src/index.d.ts"
+  },
+  "peerDependencies": {
+    "marked": ">=13 <16"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/fsegurai/marked-extensions.git"
+  },
+  "bugs": {
+    "url": "https://github.com/fsegurai/marked-extensions/issues"
+  },
+  "homepage": "https://github.com/fsegurai/marked-extensions#readme"
+}

package/src/constants.js

@@ -0,0 +1,166 @@
+'use strict';
+
+// Counter for generating unique IDs for tab containers
+export const tabCounter = { value: 0 };
+
+export const DEFAULT_OPTIONS = {
+  tabsClass: 'marked-extended-tabs-container',
+  persistSelection: true,
+  storageKey: 'marked-tabs-selection',
+  animation: 'fade', // 'fade', 'slide', or 'none'
+  autoActivate: true, // Automatically activate first tab if none marked active
+  customClass: '', // Additional CSS class for the tabs content container
+};
+
+/**
+ * Creates the JavaScript code for tab functionality
+ */
+export function createTabsStyles(tabsContainerId, tabsData, animation) {
+  return `<style>
+    /* Base tab styling */
+    #${tabsContainerId} {
+      margin: 1rem 0;
+      border: 1px solid #ddd;
+      border-radius: 4px;
+      overflow: hidden;
+
+      /* Hide radio inputs */
+      & .marked-extended-tabs-input {
+        position: absolute;
+        opacity: 0;
+        pointer-events: none;
+      }
+
+      /* Navigation styling */
+      & .marked-extended-tabs-nav {
+        display: flex;
+        justify-content: space-evenly;
+        list-style: none;
+        margin: 0;
+        padding: 0;
+        overflow-x: auto;
+        
+  
+        /* Style tab labels as buttons */
+        .marked-extended-tabs-label {
+          display: flex;
+          flex: 1 1 auto;
+          justify-content: center;
+          align-items: center;
+          flex-direction: row;
+          flex-wrap: wrap; /* Allow wrapping on small screens */
+          gap: 0.5rem;
+          padding: 0.75rem 1rem;
+          cursor: pointer;
+          font-size: 1rem;
+          font-weight: 500;
+          background: transparent;
+          border: none;
+          border-bottom: 2px solid transparent;
+          transition: all 0.2s ease;
+
+          /* Tab icon styling */
+          .marked-extended-tabs-icon {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 1.2rem;
+          }
+        }
+
+        /* Responsive tweaks */
+        @media (max-width: 768px) {
+          .marked-extended-tabs-label {
+            font-size: 0.9rem;
+            padding: 0.5rem 0.75rem;
+            gap: 0.4rem;
+          }
+
+          .marked-extended-tabs-icon {
+            font-size: 1rem;
+          }
+        }
+
+        @media (max-width: 480px) {
+          .marked-extended-tabs-label {
+            flex-direction: column;
+            text-align: center;
+            padding: 0.5rem;
+            font-size: 0.85rem;
+          }
+
+          .marked-extended-tabs-icon {
+            font-size: 1rem;
+          }
+        }
+      }
+
+      /* Content container */
+      & .marked-extended-tabs-content {
+        padding: 1rem;
+  
+        & img {
+            max-width: 100%;
+            width: 100%;
+            height: auto;
+            display: block;
+            object-fit: cover;
+            margin: 0;
+        }
+
+        /* Hide all tab panes by default - CRITICAL */
+        & .marked-extended-tabs-content-pane {
+          display: none;
+        }
+      }
+    }
+    
+    /* CSS-only tab selection - show selected tab */
+    ${tabsData
+    .map((tab) => {
+      const inputId = `input-${tab.id}`;
+      const labelId = `label-${tab.id}`;
+      const tabId = tab.id;
+
+      return `
+        /* Show tab content when corresponding input is checked */
+        #${tabsContainerId} #${inputId}:checked ~ .marked-extended-tabs-content #${tabId} {
+          display: block;
+          animation: ${animation === 'fade' ? 'tab-fade-in' : animation === 'slide' ? 'tab-slide-in' : 'none'} 0.3s ease-in-out;
+        }
+        
+        /* Style for active tab */
+        #${tabsContainerId} #${inputId}:checked ~ .marked-extended-tabs-nav #${labelId} {
+          // background: light-dark(#2d333b, #fff);
+          background: var(--marked-extended-tabs-selected-background) !important;
+          border-bottom: 2px solid var(--md-sys-color-primary) !important;
+          font-weight: 600 !important;
+        }
+      `;
+    })
+    .join('')}
+    
+    /* Animation keyframes */
+    ${
+  animation === 'fade'
+    ? `
+      @keyframes tab-fade-in {
+        from { opacity: 0; }
+        to { opacity: 1; }
+      }
+    `
+    : ''
+}
+    
+    ${
+  animation === 'slide'
+    ? `
+      @keyframes tab-slide-in {
+        from { transform: translateY(10px); opacity: 0; }
+        to { transform: translateY(0); opacity: 1; }
+      }
+    `
+    : ''
+}
+  </style>`;
+}

package/src/index.d.ts

@@ -0,0 +1,50 @@
+import type { MarkedExtension } from 'marked';
+
+/**
+ * Configuration options for the tabs extension
+ */
+export interface TabsOptions {
+  /**
+   * CSS class for the tabs container
+   * @default 'marked-extended-tabs-container'
+   */
+  tabsClass?: string;
+
+  /**
+   * Whether to persist tab selection between page loads
+   * @default true
+   */
+  persistSelection?: boolean;
+
+  /**
+   * Key to use for localStorage
+   * @default 'marked-tabs-selection'
+   */
+  storageKey?: string;
+
+  /**
+   * Animation type for tab transitions
+   * @default 'fade'
+   */
+  animation?: 'fade' | 'slide' | 'none';
+
+  /**
+   * Automatically activate first tab if none marked active
+   * @default true
+   */
+  autoActivate?: boolean;
+
+  /**
+   * Additional CSS class for the tabs content container
+   * @default ''
+   */
+  customClass?: string;
+}
+
+/**
+ * Adds support for extended tabs in marked.
+ * This extension allows creating tabbed content within markdown.
+ * @param options Configuration options for the tabs extension
+ * @returns A marked extension object that can be passed to marked.use()
+ */
+export default function markedExtendedTabs(options?: TabsOptions): MarkedExtension;

package/src/index.js

@@ -0,0 +1,39 @@
+'use strict';
+
+import { DEFAULT_OPTIONS } from './constants.js';
+import { createTokenizer } from './tokenizer.js';
+
+/**
+ * Adds support for extended tabs in marked.
+ * This extension allows creating tabbed content within markdown:
+ * @param {Object} options - Configuration options
+ * @param {string} [options.tabsClass='marked-extended-tabs-container'] - CSS class for the tabs container
+ * @param {boolean} [options.persistSelection=true] - Whether to persist tab selection between page loads
+ * @param {string} [options.storageKey='marked-tabs-selection'] - Key to use for localStorage
+ * @param {string} [options.animation='fade'] - Animation type ('fade', 'slide', or 'none')
+ * @param {boolean} [options.autoActivate=true] - Automatically activate the first tab if none is marked active
+ * @param {string} [options.customClass=''] - Additional CSS class for the tabs content container
+ * @returns {Object} The marked extension object
+ */
+export default function markedExtendedTabs(options = {}) {
+  // Validate animation option
+  if (options.animation && !['fade', 'slide', 'none'].includes(options.animation)) {
+    console.warn(`[marked-extended-tabs] Invalid animation value: ${options.animation}. Using default 'fade'.`);
+    options.animation = 'fade';
+  }
+
+  const config = { ...DEFAULT_OPTIONS, ...options };
+
+  // Ensure storageKey is safe for localStorage
+  if (config.persistSelection && (!config.storageKey || typeof config.storageKey !== 'string')) {
+    config.storageKey = 'marked-tabs-selection';
+  }
+
+  return {
+    walkTokens(token) {
+      // Example: Add custom handling or logging of the tokens
+      if (token.type !== 'tabs') return;
+    },
+    extensions: [createTokenizer(config)],
+  };
+}

package/src/renderer.js

@@ -0,0 +1,70 @@
+'use strict';
+
+import { marked } from 'marked';
+import { createTabsStyles } from './constants.js';
+
+/**
+ * Renders the tabs component using CSS-only approach (no JavaScript)
+ *
+ * @param {Object} meta - The tab metadata
+ * @param {string} meta.tabsContainerId - Unique ID for the tabs container
+ * @param {Array} meta.tabsData - Array of tab data objects
+ * @param {string} meta.tabsData[].id - Unique ID for the tab
+ * @param {string} meta.tabsData[].content - Content of the tab
+ * @param {Object} meta.tabsData[].props - Properties of the tab
+ * @param {boolean} meta.tabsData[].props.active - Whether the tab is active
+ * @param {string} meta.tabsData[].props.icon - Icon for the tab
+ * @param {string} meta.tabsData[].props.label - Label for the tab
+ * @param {string} meta.tabsClass - CSS class for the tabs container
+ * @param {string} meta.animation - Animation type ('fade', 'slide', or 'none')
+ * @param {string} meta.class - Additional CSS class for the tabs
+ * @returns {string} The rendered HTML
+ */
+export function renderTabs(meta) {
+  const { tabsContainerId, tabsData, tabsClass, animation, customClass = '' } = meta;
+
+  if (!tabsData || tabsData.length === 0) {
+    return '<div class="error-message">No tab content found</div>';
+  }
+
+  let inputsHtml = '';
+  let navHtml = '';
+  let contentHtml = '';
+
+  for (const tab of tabsData) {
+    const { id, content, props } = tab;
+    const { active, icon, label } = props;
+
+    const inputId = `input-${id}`;
+    const labelId = `label-${id}`;
+    const isChecked = active ? 'checked' : '';
+    const ariaSelected = active ? 'true' : 'false';
+    const iconHtml = icon ? `<span class="marked-extended-tabs-icon">${icon}</span>` : '';
+
+    // Inputs first
+    inputsHtml += `<input type="radio" name="${tabsContainerId}-tabs" id="${inputId}" class="marked-extended-tabs-input" ${isChecked}>`;
+
+    // Navigation labels
+    navHtml += `
+      <label for="${inputId}" id="${labelId}" class="marked-extended-tabs-label${customClass}" role="tab" aria-selected="${ariaSelected}" data-tab-id="${id}">
+        ${iconHtml}<span class="tab-label">${label}</span>
+      </label>`;
+
+    // Tab content
+    contentHtml += `
+      <div class="marked-extended-tabs-content-pane" id="${id}" role="tabpanel" aria-labelledby="${inputId}">
+        ${marked.parse(content)}
+      </div>`;
+  }
+
+  const styles = createTabsStyles(tabsContainerId, tabsData, animation);
+
+  return `
+    <div id="${tabsContainerId}" class="${tabsClass}${customClass}" data-animation="${animation}">
+      ${inputsHtml}
+      <div class="marked-extended-tabs-nav" role="tablist">${navHtml}</div>
+      <div class="marked-extended-tabs-content ${customClass}">${contentHtml}</div>
+    </div>
+    ${styles}
+  `;
+}

package/src/tokenizer.js

@@ -0,0 +1,99 @@
+'use strict';
+
+import { constructProps, tabContainerRegex, tabItemRegex, validateRegex } from '../../helper/utils.js';
+import { tabCounter } from './constants.js';
+import { renderTabs } from './renderer.js';
+
+/**
+ * Creates a tokenizer function for the tabs extension
+ *
+ * @param {Object} config - Configuration options
+ * @returns {Object} The tokenizer object
+ */
+export function createTokenizer(config) {
+  const { autoActivate } = config;
+  const tabElement = 'tabBlock';
+  const tabItemElement = 'tabItemBlock';
+
+  return {
+    name: 'tabs',
+    level: 'block',
+    tokenizer(src) {
+      const blockMatch = validateRegex(tabElement, src);
+
+      if (!blockMatch) return undefined;
+
+      // First position is the full match, second position is the content
+      const [raw, tabContent] = blockMatch;
+
+      // Generate unique ID for this tab container
+      const tabsContainerId = `tabs-container-${++tabCounter.value}`;
+
+      // Find individual tabs directly in the extracted tab content
+      const tabsData = [];
+
+      let tabMatch;
+      let tabIndex = 0;
+
+      // Find all tab items in the content
+      while ((tabMatch = tabItemRegex.exec(tabContent)) !== null) {
+        // Extract tab properties and content
+        const propsStr = tabMatch[1];
+        const tabContent = tabMatch[2].trim();
+
+        // Parse properties with defaults
+        const props = constructProps(tabItemElement, propsStr);
+
+        // If no label is provided, use a default
+        if (!props.label) props.label = `Tab ${tabIndex + 1}`;
+
+        // Convert string 'true'/'false' to boolean for the active property
+        props.active = props.active === 'true';
+
+        // Add to tabs data
+        tabsData.push({
+          id: `${tabsContainerId}-tab-${tabIndex}`,
+          props,
+          content: tabContent,
+        });
+
+        tabIndex++;
+      }
+
+      // If no tabs were found, return undefined
+      if (tabsData.length === 0) {
+        return undefined;
+      }
+
+      // Apply auto-activation if enabled and no tab is explicitly marked as active
+      if (autoActivate) {
+        const hasActiveTab = tabsData.some((tab) => tab.props.active === true);
+        if (!hasActiveTab && tabsData.length > 0) {
+          tabsData[0].props.active = true;
+        }
+      }
+
+      // Parse properties from the raw string if needed (e.g. :::tabs{class="custom"})
+      // We'll implement a simple parser for this
+      const blockPropMatch = raw.match(tabContainerRegex);
+      const blockProps = blockPropMatch && blockPropMatch[1] ? constructProps(tabElement, blockPropMatch[1]) : {};
+
+      // Create token with metadata for the renderer
+      const token = {
+        type: 'tabs',
+        raw,
+        meta: {
+          tabsContainerId,
+          tabsData,
+          ...config,
+          ...blockProps,
+        },
+      };
+
+      return token;
+    },
+    renderer({ meta }) {
+      return renderTabs(meta);
+    },
+  };
+}