Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(transform): added transform plugin , runtime controller, React hook #1

Merged
merged 14 commits into from
Jun 28, 2024
Merged

feat(transform): added transform plugin , runtime controller, React hook #1

merged 14 commits into from
Jun 28, 2024

Conversation

makhnatkin
Copy link
Collaborator

@makhnatkin makhnatkin commented Jun 14, 2024 •
edited
Loading

Added first version html plugin

  1. plugin/transform.ts
export type PluginOptions = {
    runtimeJsPath: string;
    containerClasses: string;
    bundle: boolean;
    sanitize?: (dirtyHtml: string) => string;
};
  1. runtime/HtmlController.ts
export interface IHtmlIFrameController {
    readonly block: HTMLIFrameElement;
    execute(callback: (controller: IHtmlIFrameController) => void): void;
    setStyles(styles: Record<string, string>): void;
}

HtmlIFrameController class has also been added that can automatically adjust the height of an iframe based on its content, apply styles, and execute callbacks for each of the frames.

  1. react/useDiplodocHtml.ts with methods reinitialize, forEach
  2. Tests were not added in this PR, they will be implemented later.

@makhnatkin makhnatkin changed the title Feat html plugin Added html plugin Jun 27, 2024
@makhnatkin makhnatkin requested review from 3y3 and d3m1d0v June 27, 2024 09:16
@makhnatkin makhnatkin marked this pull request as ready for review June 27, 2024 09:17
d3m1d0v
d3m1d0v reviewed Jun 27, 2024
View reviewed changes
README.md Outdated
`, {
plugins: [
htmlExtension.transform({
sanitize: dirtyHtml => sanitizeHtml(dirty, {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Different name for the first argument (dirtyHtml, dirty)

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

fixed

package.json Outdated
},
"./runtime": {
"types": "./runtime/index.d.ts",
"style": "./runtime/index.css",
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe we should add a separate export path for styles?

"exports": {
  "./runtime/styles": "./runtime/index.css"
}

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

deleted css (it was empty)

src/plugin/transform.ts Outdated
bundle = true,
sanitize = defaultSanitize,
shouldUseSanitize = false,
shouldUseIframe = true,
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this boolean flag needed?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

deleted

src/plugin/transform.ts Outdated
Comment on lines 43 to 44
sanitize = defaultSanitize,
shouldUseSanitize = false,
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can combine this two params in one:

transform({sanitize: false});
transform({sanitize: (v) => v});

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

fixed, now only: transform({sanitize: (v) => v}); or transform({sanitize: undefined});

src/plugin/transform.ts Outdated
token.attrPush([TokenAttr.style, 'width:100%']);
}

const resultHtml = shouldUseSanitize ? sanitize(content) : content;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

markdown-editor extension needs original markup. this is necessary so that the editor does not change the markup on its own

so sanitize should be in render step or we need to save original markup in additional token attribute

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

moved to render

src/plugin/utils.ts Outdated
@@ -0,0 +1,18 @@
import sanitizeHtml from 'sanitize-html';
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

sanitize-html needs to be in deps or peerDeps of package

If u wont use pre-configured sanitizer from diplodoc/transform, u need to import it as follows: https://github.com/diplodoc-platform/transform/blob/master/src/transform/highlight.ts#L8

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

deleted default sanitizeHtml

src/runtime/utils.ts Outdated
// @ts-ignore @typescript-eslint/no-explicit-any
type QueueManagerCallback<T> = (...args: T[]) => any | void;

// @ts-ignore @typescript-eslint/no-explicit-any
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why is @ts-ignore used?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

fixed

src/runtime/HtmlController.ts Outdated
const IFRAME_TAG = 'iframe';

export type HTMLControllerForEachCallback = (
block: HtmlDivController | HtmlIFrameController,
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

maybe it's worth adding an interface that will be implemented by HtmlDivController and HtmlIFrameController?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

deleted HtmlDivController

@makhnatkin makhnatkin requested a review from d3m1d0v June 28, 2024 08:14
@makhnatkin makhnatkin changed the title Added html plugin feat(transform): added html plugin Jun 28, 2024
@makhnatkin makhnatkin changed the title feat(transform): added html plugin feat(transform): added transform plugin , runtime controller, React hook Jun 28, 2024
@makhnatkin makhnatkin self-assigned this Jun 28, 2024
@makhnatkin makhnatkin merged commit b3a3643 into master Jun 28, 2024
2 checks passed
@makhnatkin makhnatkin deleted the feat-html-plugin branch June 28, 2024 11:47
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@d3m1d0v d3m1d0v d3m1d0v approved these changes

@3y3 3y3 Awaiting requested review from 3y3

Assignees

@makhnatkin makhnatkin

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@makhnatkin @d3m1d0v