Code Monkey home page Code Monkey logo

helix-markdown-support's Introduction

Helix Markdown Support

Various markdown related parsing, processing and stringification utilities.

Status

codecov CircleCI GitHub license GitHub issues LGTM Code Quality Grade: JavaScript semantic-release

Installation

$ npm install @adobe/helix-markdown-support

Usage

See the API documentation.

Development

Build

$ npm install

Test

$ npm test

Lint

$ npm run lint

helix-markdown-support's People

Contributors

dominique-pfister avatar renovate-bot avatar renovate[bot] avatar semantic-release-bot avatar tripodsan avatar

Stargazers

 avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

helix-markdown-support's Issues

support for per-cell table alignment

it is important to transport the table cell alignment to markdown, using the following algorithm:

  • all tables will be represented as HTML tables
  • default horizontal alignment is left
  • default vertical alignment is top
  • the non-default alignments will be applied to the cells

horizontal alignment

direction attribute
left none (default)
center align="center"
right align="right"
justify align="justify"

vertical alignment

direction attribute
top none (default)
middle valign="middle"
bottom valign="bottom"

Use HTML/MD mixed format for tables

alternative table representations to support container content in table cells

the problem with markdown tables is, that the cells can't contain container elements. so for tables with container elements, we use html tables. so far word2md used to convert the entire sub-tree to html.

according to https://spec.commonmark.org/0.29/#html-block, a HTML block is terminated by a blank line.
example:

<table><tr><td align="right">

**Hello**,

_world_.
</td></tr>
<tr><td>

1. hello
2. world and a very long line.
</td></tr></table>

github rendering test:

Hello,

world.

  1. hello
  2. world and a very long line.

Note: Since the output might be different than the current conversion, this change should be considered breaking.

move image above heading if it's the first element

if an author accidentally puts and image into a heading, it is automatically moved below the heading.
eg:

- heading
   - Hello
   - <img>

becomes:

# Hello
![](img)

but when the image is the first element it should go above the heading:

- heading
   - <img>
   - Hello

becomes:

![](img)
# Hello

improve linefeeds / whitespace handling inside links

└─1 paragraph[2]
    ├─0 link[3]
    │   │ url: "https://main--healthy-kp--hlxsites.hlx.page/northern-california/health-wellness/cancer-care/"
    │   ├─0 text "Cancer Care"
    │   ├─1 break "\n"
    │   └─2 break "\n"
  • should move breaks after link.
  • non leading/trailing breaks should be converted to spaces, as they can't be represented in markdown.

Action Required: Fix Renovate Configuration

There is an error with this repository's Renovate configuration that needs to be fixed. As a precaution, Renovate will stop PRs until it is resolved.

Error type: Failed to decrypt field npmToken. Please re-encrypt and try again.

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

This repository currently has no open or pending branches.

Detected dependencies

github-actions
.github/workflows/main.yaml
  • actions/checkout v4
  • actions/setup-node v4
  • codecov/codecov-action v4
  • actions/checkout v4
  • actions/setup-node v4
.github/workflows/semver-check.yaml
npm
package.json
  • hast-util-to-html 9.0.1
  • js-yaml 4.1.0
  • mdast-util-gfm-footnote 2.0.0
  • mdast-util-gfm-strikethrough 2.0.0
  • mdast-util-gfm-table 2.0.0
  • mdast-util-gfm-task-list-item 2.0.0
  • mdast-util-phrasing 4.1.0
  • mdast-util-to-hast 13.1.0
  • micromark-extension-gfm-footnote 2.0.0
  • micromark-extension-gfm-strikethrough 2.0.0
  • micromark-extension-gfm-table 2.0.0
  • micromark-extension-gfm-tagfilter 2.0.0
  • micromark-extension-gfm-task-list-item 2.0.1
  • micromark-util-character 2.1.0
  • micromark-util-combine-extensions 2.0.0
  • micromark-util-symbol 2.0.0
  • unist-util-find 3.0.0
  • unist-util-visit 5.0.0
  • @adobe/eslint-config-helix 2.0.6
  • @adobe/remark-gridtables 3.0.4
  • @semantic-release/changelog 6.0.3
  • @semantic-release/git 10.0.1
  • c8 9.1.0
  • eslint 8.57.0
  • husky 9.0.11
  • junit-report-builder 3.2.1
  • lint-staged 15.2.2
  • mdast-builder 1.1.1
  • mocha 10.4.0
  • mocha-multi-reporters 1.5.1
  • rehype-format 5.0.0
  • rehype-stringify 10.0.0
  • remark-gfm 4.0.0
  • remark-parse 11.0.0
  • remark-rehype 11.1.0
  • remark-stringify 11.0.0
  • semantic-release 23.0.8
  • unified 11.0.4
  • unist-util-inspect 8.0.0
  • unified 11.x
  • node >=14

  • Check this box to trigger a request for Renovate to run again on this repository

add support for gridtables

Research if https://github.com/zestedesavoir/zmarkdown/tree/master/packages/remark-grid-tables can be used for grid tables in helix

also see: https://pandoc.org/MANUAL.html#extension-grid_tables

GridTables look like this:

+-------------------+------+
| Table Headings    | Here |
+--------+----------+------+
| Sub    | Headings | Too  |
+========+=================+
| cell   | column spanning |
| spans  +---------:+------+
| rows   |   normal | cell |
+---v----+:---------------:+
|        | cells can be    |
|        | *formatted*     |
|        | **paragraphs**  |
|        | ```             |
| multi  | and contain     |
| line   | blocks          |
| cells  | ```             |
+========+=========<+======+
| footer |    cells |      |
+--------+----------+------+
  • the top of a cell must be indicated by +- followed by some - or + and finished by -+.
  • if the table contains a footer but no header, the top row should use = as grid line.
  • col spans are indicated by missing column (|) delimiters
  • row spans are indicated by missing row (-) delimiters
  • cells can be left, center, right, or justify aligned; indicated by the placement of : or ><
  • cells can be top, middle, or bottom v-aligned; indicated by the placement of arrows (v ^ x)
  • the header and footer sections are delimited by section delimiters (=).
  • if no section delimiters are present, all cells are placed in the table body.
  • if only 1 section delimiter is present, it delimits header from body.
  • the content in cells can be a full Markdown document again. note, that the cell boundaries (|)
    need to exactly match with the column markers (+) in the row delimiters, if the cell content
    contains |, otherwise the correct layout of the table can't be guaranteed.

Layout

The table layout tries to keep the table within a certain width (default 120). For example,
if the table has 3 columns, each column will be max 40 characters wide. If all text in a column
is smaller, it will shrink the columns. However, cells have a minimum width (default 10) when
text needs to be broken. If the cell contents need more space, e.g. with a nested table or
code block, it will grow accordingly.

Align

Horizontal align is indicated by placing markers at the grid line above the cell:

Justify     Center     Left       Right
+>-----<+  +:-----:+  +:------+  +------:+
| A b C |  |  ABC  |  | ABC   |  |   ABC |
+-------+  +-------+  +-------+  +-------+

Vertical align is indicated by placing markers at the center of the grid line above the cell:

Top        Middle     Bottom
+---^---+  +---x---+  +---v---+
| Larum |  |       |  |       |
| Ipsum |  | Larum |  |       |
|       |  | Ipsum |  | Larum |
|       |  |       |  | Ipsum |
+-------+  +-------+  +-------+

Syntax


gridTable := tbd;

Note: the top of a cell must be indicated by +- followed by some - or + and finished by -+.
So, this is not a correct table:

+--+
|a |
+--+

But, this is a correct table:

+---+
| a |
+---+

MDAST Syntax tree

The following interfaces are added to [mdast][] by this utility.

Nodes

GridTable

interface GridTable <: Parent {
  type: "gridTable"
  children: [GridTableHeader|GridTableBody|GridTableFooter]
}

GridTableHeader

interface GridTableHeader <: Parent {
  type: "gtHead"
  children: [GridTableRow]
}

GridTableBody

interface GridTableBody <: Parent {
  type: "gtBody"
  children: [GridTableRow]
}

GridTableFoot

interface GridTableFooter <: Parent {
  type: "gtFoot"
  children: [GridTableRow]
}

GridTableRow

interface GridTableRow <: Parent {
  type: "gtRow"
  children: [GridTableCell]
}

GridTableCell

interface GridTableCell <: Parent {
  type: "gtCell"
  colSpan: number >= 1
  rowSpan: number >= 1
  align: alignType
  valign: valignType
  children: [MdastContent]
}

GridTableCell ([Parent][dfn-parent]) represents a header cell in a
[GridTable][dfn-table], if its parent is a [gridTableHead][term-head], or a data
cell otherwise.

GridTableCell can be used where [gridTableRow][dfn-row-content] content is expected.
Its content model is [mdast][dfn-phrasing-content] content, allowing full mdast documents.

Enumeration

alignType

enum alignType {
  "left" | "right" | "center" | "justify" | null
}

valignType

enum alignType {
  "top" | "bottom" | "middle" | null
}

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.