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

Implement method to process attributes that can be overridden by slots #2511

Merged
merged 5 commits into from
Apr 14, 2024
Merged

Implement method to process attributes that can be overridden by slots #2511

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
08c6b18
implement processSlotAttribute
luminousleek Apr 10, 2024
01de626
fix lint
luminousleek Apr 10, 2024
80c8545
use processSlotAttribute for the rest
luminousleek Apr 12, 2024
a96d0d9
use slotAttribute for panel alt
luminousleek Apr 12, 2024
57ab170
Merge branch 'master' into process-slot-attributes
kaixin-hc Apr 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
59 changes: 33 additions & 26 deletions packages/core/src/html/MdAttributeRenderer.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,10 +75,23 @@ export class MdAttributeRenderer {
return hasAttribute;
}

processPopoverAttributes(node: MbNode) {
if (!this.hasSlotOverridingAttribute(node, 'header')) {
this.processAttributeWithoutOverride(node, 'header', true);
/**
* Checks if there is a pre-existing slot for the attribute.
* If there is a slot, it deletes the attribute and logs a warning.
* If there is no slot, it processes the markdown attribute.
* @param node Element to process
* @param attribute Attribute name to process
* @param isInline Whether to process the attribute with only inline markdown-it rules
* @param slotName Name attribute of the <slot> element to insert, which defaults to the attribute name
*/
processSlotAttribute(node: MbNode, attribute: string, isInline: boolean, slotName = attribute) {
Copy link
Contributor Author

Choose a reason for hiding this comment

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

I'm not entirely happy with the name of the method but it's the best I can come up with. Some other alternatives I've considered are:

  • processSlottableAttribute
  • processAttributeCanBeOverridden
  • processOverridableAttribute
  • processAttributeWithSlot

Let me know your thoughts thanks.

Copy link
Contributor

Choose a reason for hiding this comment

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

I think processSlotAttribute is ok!

if (!this.hasSlotOverridingAttribute(node, attribute, slotName)) {
this.processAttributeWithoutOverride(node, attribute, isInline, slotName);
}
}

processPopoverAttributes(node: MbNode) {
this.processSlotAttribute(node, 'header', true);

// Warn if there is a content slot overriding the attributes 'content' or 'src'
const hasSlotAndContentAttribute = this.hasSlotOverridingAttribute(node, 'content', 'content');
Copy link
Contributor Author

Choose a reason for hiding this comment

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

This bit was left unchanged because the logic for the content attribute is slightly different. According to the docs, the srcand content attributes and the content slot can be used for popovers. If all three are present then MarkBind will prioritise them in the following order:

  1. content slot
  2. content attribute
  3. src attribute

So the logic to process this attribute (and especially the logger warning) is different than the other attributes. Specifically, it needs to check for the case that the src and content attributes are both used, and show a warning message if that is the case. The processSlotAttribute method does not account for this case, so this chunk of code is still here.

Expand All @@ -96,69 +109,63 @@ export class MdAttributeRenderer {
}

processTooltip(node: MbNode) {
this.processAttributeWithoutOverride(node, 'content', true);
this.processSlotAttribute(node, 'content', true);
}

processModalAttributes(node: MbNode) {
if (!this.hasSlotOverridingAttribute(node, 'header')) {
this.processAttributeWithoutOverride(node, 'header', true);
}
this.processSlotAttribute(node, 'header', true);
}

/*
* Panels
*/

processPanelAttributes(node: MbNode) {
this.processAttributeWithoutOverride(node, 'alt', false, '_alt');
if (!this.hasSlotOverridingAttribute(node, 'header')) {
this.processAttributeWithoutOverride(node, 'header', false);
}
this.processSlotAttribute(node, 'alt', false, '_alt');
this.processSlotAttribute(node, 'header', false);
}

/*
* Questions, QOption, and Quizzes
*/

processQuestion(node: MbNode) {
this.processAttributeWithoutOverride(node, 'header', false);
this.processAttributeWithoutOverride(node, 'hint', false);
this.processAttributeWithoutOverride(node, 'answer', false);
this.processSlotAttribute(node, 'header', false);
this.processSlotAttribute(node, 'hint', false);
this.processSlotAttribute(node, 'answer', false);
}

processQOption(node: MbNode) {
this.processAttributeWithoutOverride(node, 'reason', false);
this.processSlotAttribute(node, 'reason', false);
}

processQuiz(node: MbNode) {
this.processAttributeWithoutOverride(node, 'intro', false);
this.processSlotAttribute(node, 'intro', false);
}

/*
* Tabs
*/

processTabAttributes(node: MbNode) {
this.processAttributeWithoutOverride(node, 'header', true);
this.processSlotAttribute(node, 'header', true);
}

/*
* Boxes
*/

processBoxAttributes(node: MbNode) {
this.processAttributeWithoutOverride(node, 'icon', true);
this.processAttributeWithoutOverride(node, 'header', false);
this.processSlotAttribute(node, 'icon', true);
this.processSlotAttribute(node, 'header', false);
}

/*
* Dropdowns
*/

processDropdownAttributes(node: MbNode) {
if (!this.hasSlotOverridingAttribute(node, 'header')) {
this.processAttributeWithoutOverride(node, 'header', true);
}
this.processSlotAttribute(node, 'header', true);
}

/**
Expand Down Expand Up @@ -186,12 +193,12 @@ export class MdAttributeRenderer {
}

processScrollTopButtonAttributes(node: MbNode) {
this.processAttributeWithoutOverride(node, 'icon', true);
this.processSlotAttribute(node, 'icon', true);
}

processAnnotationPointAttributes(node: MbNode) {
kaixin-hc marked this conversation as resolved.
Show resolved Hide resolved
this.processAttributeWithoutOverride(node, 'content', false);
this.processAttributeWithoutOverride(node, 'header', false);
this.processAttributeWithoutOverride(node, 'label', false);
this.processSlotAttribute(node, 'content', false);
this.processSlotAttribute(node, 'header', false);
this.processSlotAttribute(node, 'label', false);
}
}
Loading