Merge pull request #8 from jackyzha0/support-html

README.md

@@ -72,35 +72,48 @@ Basic usage may look something like this:
 </body>
 ```
 
-You can check out a more detailed example in `demo/index.html`
-
-## Types
+### Advanced Usage Options
+For further, customization, we provide a configuration object that can be passed into the function for different behavior. 
 ```typescript
-interface Content {
-  text: string          // Original string content in the line
-  replacements: Line[]  // Sections of the original text to replace/expand
+// The configuration for how you want telescopic text to be parsed and rendered
+interface Config {
+  /**
+   * Character used to separate entries on the same level. Defaults to a single space (" ")
+   */
+  separator?: string;
+  /**
+   * If true, allows sections to expand automatically on mouse over rather than requiring a click. Defaults to false.
+   */
+  shouldExpandOnMouseOver?: boolean;
+  /**
+   * A mode that designates what form the input text is in and should be interpreted as. Defaults to 'text'.
+   */
+  textMode?: TextMode;
 }
+```
 
-interface Line {
-  og: string           // the original string to replace
-  new: string          // the replacement string
-  replacements: Line[] // nested replacements to apply on the resultant line afterwards
-}
+You would use this by passing a custom configuration object into the function in order to override any of the defaults above. For example, this is how you would create telescopic text with custom HTML tags:
+```javascript
+const content = `
+* Some <b>rich</b> text
+  * with <i>nested</i> <b>rich</b> text
+`
+const config = { textMode: TextMode.Html };
+const poemContent = createTelescopicTextFromBulletedList(content, config);
+```
 
+You can check out a more detailed example in `demo/index.html`
+
+
+
+## Types
+```typescript
 // Default function to create a new `<div>` node containing the
 // telescoping text from bullet points
-function createTelescopicTextFromBulletedList(content: string)
-
-// This is the fundamental data structure for parsing native bullet lists into telescoping text.
-interface NewContent {
-  text: string;
-  expansions?: NewContent[];
-  // This is always a space right now, but could be extended to use any
-  // separator between content.
-  separator?: string;
-}
+function createTelescopicTextFromBulletedList(content: string, config?: Config)
 ```
 
 ## Future Work
+See our issues page for all the features we're thinking about exploring. Some examples include:
 - Supporting infinite expansion with `...`
 - Concept of shapeshifting text in general... these are not always expansions.

lib/index.d.ts

@@ -17,20 +17,40 @@ interface TelescopeNode {
     depth: number;
     telescopicOut: TelescopicOutput;
 }
+/**
+ * Modes that designate what form the input text is in and should be interpreted as.
+ */
+declare enum TextMode {
+    Text = "text",
+    /**
+     * NOTE: this uses `innerHtml` under the hood, so should not be used with untrusted user input and can have
+     * unexpected behavior if the HTML is not valid.
+     */
+    Html = "html"
+}
+declare const TextModeValues: TextMode[];
 interface Config {
     /**
-    * Character used to separate entries on the same level. Defaults to a single space (" ")
-    */
+     * Character used to separate entries on the same level. Defaults to a single space (" ")
+     */
     separator?: string;
     /**
-    * If true, allows sections to expand automatically on mouse over rather than requiring a click.
-    */
+     * If true, allows sections to expand automatically on mouse over rather than requiring a click. Defaults to false.
+     */
     shouldExpandOnMouseOver?: boolean;
+    /**
+     * A mode that designates what form the input text is in and should be interpreted as. Defaults to 'text'.
+     */
+    textMode?: TextMode;
+    /**
+     *
+     */
+    htmlContainerTag?: keyof HTMLElementTagNameMap;
 }
-declare const DefaultConfig: Config;
+declare type CreateTelescopicTextConfig = Pick<Config, "shouldExpandOnMouseOver" | "textMode" | "htmlContainerTag">;
 declare let _lastHoveredTime: number;
-declare function _hydrate(line: Content, node: any, shouldExpandOnMouseOver?: boolean): void;
-declare function _createTelescopicText(content: Content[], shouldExpandOnMouseOver?: boolean): HTMLDivElement;
+declare function _hydrate(line: Content, node: any, config?: CreateTelescopicTextConfig): void;
+declare function _createTelescopicText(content: Content[], config?: CreateTelescopicTextConfig): HTMLDivElement;
 /*****************/
 /*****************/
 declare function _parseMarkdown(mdContent: string): TelescopicOutput;
@@ -43,4 +63,4 @@ declare function _parseMarkdownIntoContent(mdContent: string, separator?: string
  * @param config - Configuration options provided to create interactive, telescopic text.
  * @returns HTML div containing the telescoping text.
  */
-declare function createTelescopicTextFromBulletedList(listContent: string, { separator, shouldExpandOnMouseOver }?: Config): HTMLDivElement;
+declare function createTelescopicTextFromBulletedList(listContent: string, { separator, ...createTelescopicTextConfig }?: Config): HTMLDivElement;